首先你要先安装axios 和 qs的依赖

npm install axios
npm install qs
//安装了淘宝镜像的可以使用cnpm
cnpm install axios
cnpm install qs

直接贴代码

import axios from 'axios';//引入axios
import qs from "qs";//引入序列化对象的库
import router from '@/router';//引入路由 用于拦截状态码为未登录状态进行跳转登录页
import store from '@/store';//引入vuex 拿token
// 区分线上环境 ： 开发环境
//axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '线上环境的接口前缀地址' : '测试环境的接口前缀地址';
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'http://www.linfengya.cn' : '192.168.3.44:9000';
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
//请求超时时间 （10s）
axios.defaults.timeout = 10000;
// 声明一个axios拦截器 请求前拦截 一般用于携带token
axios.interceptors.request.use(config => {
    config.headers['authorizationToken'] = store.state.token || localStorage.getItem("token");
    return config;
}, err => {
    // Do something with request error
    return Promise.reject(err);
});

// 声明一个axios拦截器 请求后拦截 服务器返回结果时候判断再返回
axios.interceptors.response.use(res => {
    console.log(res);
    if (res.status === 200) {
        return res.data
    } else if (res.status == 406) {
        // 406 是未登录状态码 (具体问你们后端) 说明用户没登录 直接跳转登录页
        router.replace({
            path: '/login',
            // 携带当前路由 用于登录后再次进入到该页面
            query: { redirect: router.currentRoute.fullPath }
        })
    } else {
        console.log(res);
        return res
    }
}, err => {
    console.error(err)
});
const request = {
    post(url, data = {}) {
        // 判断用户传递的URL是否/开头,如果不是,加上/
        url = url.indexOf('/') == 0 ? url : '/' + url
        // 直接将data序列化
        return axios.post(url, qs.stringify(data))
    },
    get(url, data = {}) {
        url = url.indexOf('/') == 0 ? url : '/' + url
        return axios.get(url + '?' + qs.stringify(data))
    }
};
export default request

main.js中将其引入并挂载全局

import $request from "@/config/request.js";// 导入我们刚才写的js
Vue.prototype.$request = $request;//挂载axios到vue原型上

使用

// this.$request.post("/app/recruit/getCourseList", {
//     token：'qec145',
//     userId: 999
//   }).then(res => {
//     console.log(res);
//   }).catch(err => {
//     console.log(err);
//   });

每天进步一点点

后面接触到了vue3 + ts 补充一个ts中封装axios

我的文件目录

|src

|----config

|----|----request

|----|----|----index.ts

|----|----index.ts

config 下的index.ts： 即  配置接口域名

/*
* 接口域名管理  base.ts
*
* */
export const baseUrl = "http://192.168.0.58:88"; //线下
export const baseUrl2 = "http://192.168.0.58:88"; //线上

config 下的request 下的index.ts :

import store from "@/store";
import axios from "axios";
import qs from "qs";
import { baseUrl } from "@/config";
axios.defaults.headers = {
  "X-Requested-With": "XMLHttpRequest",
  "Content-Type": "application/json;charset=utf-8"
};
axios.defaults.baseURL =
  process.env.NODE_ENV === "production" ? baseUrl : baseUrl;
// 请求超时
axios.defaults.timeout = 10000;
// 开始请求
axios.interceptors.request.use(
  (config: any) => {
    // #region
    /**
     * @description 在发送请求之前做些什么 这里可以添加token
     * @description description
     */
    // #endregion
    store.state.token ? (config.headers["token"] = store.state.token) : null;
    console.log(store.state);

    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);
// 请求数据返回前做操作
axios.interceptors.response.use(
  (config: any) => {
    if (config.status === 200) {
      return config.data;
    } else {
      return config;
    }
  },
  (error: any) => Promise.reject(error)
);
export const $post = (url: any, params: Object = {}) => {
  url = url.indexOf("/") === 0 ? url : "/" + url;
  return axios.post(url, JSON.stringify(params));
};
export const $get = (url: any, params: Object = {}) => {
  url = url.indexOf("/") === 0 ? url : "/" + url;
  return axios.get(url + JSON.stringify(params));
};
export const $upLoadImg = (url: any, params: Object = {}) => {
  url = url.indexOf("/") === 0 ? url : "/" + url;
  const config = {
    headers: { "Content-Type": "multipart/form-data" }
  };
  return axios.post(url, params, config);
};

页面中使用

import { $post,$get, $upLoadImg } from "@/config/request";

const List = (params: Object = {}) => {
        $post("/shop/list", params).then((res:any)=>{
                console.log(res)
        })
};

分享到：

打赏