如何封装axios

Axios 封装及接口管理
utils/request.js 封装 axios ,开发者需要根据后台接口做修改。

1.service.interceptors.request.use 里可以设置请求头，比如设置 token。
2.config.hideloading 是在 api 文件夹下的接口参数里设置，下文会讲。
3.service.interceptors.response.use 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录。 

import axios from 'axios'
// 导入baseUrl
import { baseUrl } from '@/config'
// 导入Toast
import { Toast } from 'vant';
let service = axios.create({
    baseURL: baseUrl, // url = base api url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: 5000 // request timeout
  })
  let loading
// 请求拦截
service.interceptors.request.use(config =>{
    //1.loading动画开启
     loading=Toast.loading({
        duration: 5000,
        message: '加载中...',
        forbidClick: true,
      });
    //2.token设置(把token添加到请求头中)  vuex
    config.headers["Authorization"] = sessionStorage.getItem("token");
    return config
})
// 响应拦截器
service.interceptors.response.use(
      res=> {
        //1、关闭loading
        loading.clear();
        return Promise.resolve(res);
      },
      error => {
        loading.clear();
        console.log("err" + error);
        return Promise.reject(error);
      }
    );
    export default service

接口管理
在src/api 文件夹下统一管理接口

1.你可以建立多个模块对接接口, 比如 home.js 里是首页的接口这里讲解 user.js
2.url 接口地址，请求的时候会拼接上 config 下的 baseApi
3.method 请求方法
4.data 请求参数 qs.stringify(params) 是对数据系列化操作
5.hideloading 默认 false,设置为 true 后，不显示 loading ui 交互中有些接口不需要让用户感知
 

import qs from 'qs'
// axios
import request from '@/utils/request'
//user api

// 用户信息
export function getUserInfo(params) {
  return request({
    url: '/user/userinfo',
    method: 'post',
    data: qs.stringify(params),
    hideloading: true // 隐藏 loading 组件
  })
}

如何调用

// 请求接口
import { getUserInfo } from '@/api/user.js'

const params = { user: 'sunnie' }
getUserInfo(params)
  .then(() => {})
  .catch(() => {})