Vue中封装axios

Posted 2021-03-23 剑啸易水寒丶

参考：

　　https://www.jianshu.com/p/7a9fbcbb1114

　　https://www.cnblogs.com/dreamcc/p/10752604.html

一、安装axios

　　npm i axios -S

二、创建src/utils/axios.js、src/api/api.js

　　axios.js用于封装axios，api.js用于管理接口

三、axios.js

// axios.js

import axios from "axios";
// 部分数据需要存进store或取出
import store from "@/store"
// 请求错误时提示，根据需求引入不同ui
import { Toast, MessageBox } from "mint-ui";
// 根据返回值进行页面跳转
import router from "vue-router"
// 封装的获取本地token的方法
import { getToken } from "@/utils/auth"

const service = axios.create({
//   headers: {\'X-Requested-With\': \'XMLHttpRequest\'}, // 可以配置headers
  baseURL: "", // api的base_url
  timeout: 10000 // request timeout，默认0
});
// 请求头的设置
// axios.defaults.headers.post[\'Content-Type\'] = \'application/x-www-form-urlencoded\';

// 添加一个请求拦截器
service.interceptors.request.use(
  (config)=> {
    // Do something before request is sent
    // 获取tonken，一般是从本地获取
    // if (store.getters.token) {
    //   config.headers["token"] = getToken();
    // }
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// 添加一个响应拦截器
service.interceptors.response.use(
  (response)=> {
    // Do something with response data
    // 根据返回值做出判断
    if (response.code !== 0) {
      // 不成功时...
      if (response.code == -1) {
        // token失效时,清空缓存，跳转至登录页
        // store.commit(\'SET_TOKEN\', \'\')
        // router.push({
        //   path: ""
        // })
      }else if(){

      }else{
        // 提示错误信息
        Toast({ message: response.msg, position: "top", duration: 2 * 1000 })
      }
    }else{
        // 请求成功时
        return response;
    }
  },
  (error)=> {
    // Do something with response error
    // 提示错误信息
    Toast({ message: error.message, position: "top", duration: 5 * 1000 })
    return Promise.reject(error);
  }
);

export default service

 

四、api.js

// api.js
import request from "@/utils/axios";


export function oneApi(val) {
  return request({
    url: "", // 接口
    method: "post", // 请求方式
    data: val, // 数据
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });
}

export function twoApi(val) {
    return request({
      url: "", // 接口
      method: "post", // 请求方式
      data: val, // 数据
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    });
  }

 

五、使用

　　import { oneApi} from "@/api/api";

        oneApi(params).then(response => {

 

        });