axios库api封装

封装api的目录结构如下：

接口返回值包括状态码、说明信息、数据内容也可能是异常信息，为了避免在调用每个接口时都需要针对异常进行捕获，所以这里对ajax请求进行了封装，在ajax.js中编辑如下代码:

import axios from 'axios'
axios.defaults.baseURL = '/api'
axios.defaults.timeout =  10000

//添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 将token给到一个前后台约定好的key中，作为请求发送
  let token = '' // 获取token的方法
  if (token) {
    config.headers['Authorization'] = token
  }
  return config;
}, function (error) {
  console.log("进入request  error", error)
  return Promise.reject(error);
})

//添加响应拦截器
axios.interceptors.response.use(function (response) {
  // ajax响应拦截内容，可用于判断是否登录等业务逻辑
  return response
}, function (error) {
  return Promise.reject(error)
})

export default function ajax(url, data = {}, method = 'GET') {
  return new Promise((resolve, reject) => {
    let promise
    // 1.执行异步请求
    if (method==='GET'){
      promise = axios.get(url, {
        params: data
      })
    } else if (method==='POST'){
      promise = axios.post(url, data)
    }
    // 2.如果成功了，调用resolve
    promise.then(res => {
      // 直接获取response的data
      resolve(res.data)
    }).catch(err => {
      // 3.失败后不调用reject
      console.log(err.message)
    })
  })
}

进行接口定义是非常的简单，只需要确认访问接口的方法、接口需要传递的参数以及接口访问的地址，内容如下：

import ajax from './ajax'
export const baseUrl = 'http://localhost:8080/'
// 用户绑定
export const bindUser = (username,password) => ajax(baseUrl + 'mobile/login',{password, username}, 'POST')
// 获取地区详细信息
export const getArea = (user_id) => ajax(baseUrl + 'mobile/area', {user_id}, 'GET')

至此已经完成了接口的封装和定义，下面可以在项目中进行接口的调用了，使用方式如下：

async bindUser(){
    this.isLoading = true
    const response = await bindUser('用户名','用户密码')
    if(response.code==SUCCESS_CODE){
        // '绑定成功'
        // response.data
    } else {
        // '绑定失败'
        // response.msg
    }
}

只需要关注返回值内容，异常统一捕获