前端，封装一个axios

学习了一下axios封装，发现axios真的很好用，就封装了一个axios，这个封装可以使得我们在设计接口的时候非常方便，直接看代码吧：

这篇文章是我知乎写的搬过来的，在知乎收获了一定量的好评以及收藏量。

 

 

import axios from 'axios' 
import {Message} from 'element-ui';
//axios响应头，直接copy官方文档
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
//axios接口地址 本地就是localhost,使用时替换成后端的地址就行了
axios.defaults.baseURL = '//localhost:3006' 
// axios.defaults.baseURL = '//localhost:3006' 
 
//声明一个function request 用于封装axios，他接受一个url，type和data
//
export default function request(url, type = 'GET', data = {}) {
  return new Promise((resolve, reject) => {
    let option = {
      url,
      method: type,
    }
    //tolowercase转换成小写===get的话
    if(type.toLowerCase() === 'get') {
        //`params` 是即将与请求一起发送的 URL 参数
      option.params = data
      //否则的话就等于自己输入的data
    }else {
      option.data = data
    }
    //如果有token
    if(localStorage.token) {
      axios.defaults.headers.common['Authorization']  = localStorage.token
    }

    axios(option).then(res => {
      console.log(res.data)
      //如果res.data.status的状态为ok且本地的token和res.data.token一样那么就resolve
      if(res.data.status === 'ok') {
        if(res.data.token) {
          localStorage.token = res.data.token
        }
        resolve(res.data)
        //否则的话就message错误然后reject
      }else{
        Message.error(res.data.msg)
        reject(res.data)
      }
      //捕获异常，如果什么都不是那就网络异常
    }).catch(err => {
      Message.error('网络异常')
      reject({ msg: '网络异常' })
    })
  })
} 
//使用方式👇 
// request('/auth/login', 'POST', {username: 'hunger', password: '123456'})
//   .then(data=>{
//     console.log(data) 
//   }) 

 

使用方式就是：//request('url',type,data)

如果你需要后续操作还可以.then(data=>{console.log(data)})可以把data打出来

接下来当你获得了后端的api就可以设计接口啦。

//直接声明一个URL存储接口地址
const URL = {
  REGISTER: '/auth/register',
  LOGIN: '/auth/login',
  LOGOUT: '/auth/logout',
  GET_INFO: '/auth'
};

export default {
  register({username, password}) {
//声明一个方法接受username,password，request(url,type,data);
    return request(URL.REGISTER, 'POST', {username, password});
  },
  login({username, password}) {
    return request(URL.LOGIN, 'POST', {username, password});
  },
  logout() {
    return request(URL.LOGOUT);
  },
  getInfo() {
    return request(URL.GET_INFO);
  },
};

然后如果你需要对接口进行测试

可以直接在某个页面上面import这个api文件

再把api文件绑到window上面这样你就可以直接使用浏览器自带的控制台进行测试啦

window.auth = auth
auth.getInfo

 

​