简单配置axios 总结(可直接复制使用)

1.首先创建一个vue项目 request

npm create request

2.将项目多余内容清空，引入axios

npm install axios --save

引入之后，在main.js里面测试一下axios是不是好用的

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app');

import axios from 'axios';
axios({
  url:'http://172.16.46.94:8080/zjyzgl/TzBatchRecordController/TzBatchRecordAll',
}).then(res=>{
  console.log(res);
})

是有返回的，说明axios引用成功。

3.开始封装一个请求体

在src下面创建一个文件夹 就叫request吧

第一步引入axios并创建一个实例

import axios from "axios";
// 1.创建一个实例
const Axios = axios.create({
    baseURL: 'www.baidu.com', //基础地址
    timeout: 3000, //请求超时时间
})

第二步 配置请求拦截器 axios.interceptors.request

Axios.interceptors.request.use(config => {
    const token = localStorage.getItem('ACCESS_TOKEN'); //token是放在localStorage中
    if (token) {
        config.headers['Authorization'] = 'Bearer ' + token; // 让每个请求携带自定义 token 请根据实际情况自行修改
    }
    if (config.method == 'get') {
        config.params = {
            _t: Date.parse(new Date()) / 1000, //让每个请求都携带一个不同的时间参数，防止浏览器缓存不发送请求
            ...config.params
        }
    }
    return config;
}, (error) => {
    return Promise.reject(error);
})

第三步 响应拦截器  axios.interceptors.response  因为在请求响应可能会报错 我们要对他的报错信息进行处理 我们可以先做部分处理  具体的要根据规则来定 

//  响应拦截器中的error处理方法
const err = (error) => {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                console.log({
                    message: '系统提示',
                    description: '未授权，请重新登录',
                    duration: 4
                })
                break;
            case 403:
                console.log({
                    message: '系统提示',
                    description: '拒绝访问'
                  })
                break;
                // ... 视情况增加
        }
    }
    return Promise.reject(error)
}

 响应拦截器具体方法

//3.响应拦截器
Axios.interceptors.response.use(response => {
    const token = response.headers['Authorization'];
    if (token) {
        localStorage.setItem('ACCESS_TOKEN', token) //这是存在localStorage里面 也可以存在vuex里面 在做退出时记得清除local记录
    }
    return response.data;//去掉返回的请求配置对象什么的 直接返回结果
}, err)

第四步.将Axios导出后就可以直接使用了

export default Axios;

第五步.使用  新建一个api文件夹 里面创建一个port,js文件

import Axios from "@/request/ruquest.js"

//写法类似即可
export const  getMessage=()=>{
    return Axios({
        url:'/comments'
    })
}

在需要使用到这个接口的页面引入即可直接使用

 

下面是完整的配置项  其实axios这个可以配很多东西的 我这只是简单的配置了一下

import axios from "axios";
const baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000':'http://localhost:3000'
// 1.创建一个实例
const Axios = axios.create({
    baseURL, //基础地址
    timeout: 3000, //请求超时时间
})
//2.配置拦截器
Axios.interceptors.request.use(config => {
    const token = localStorage.getItem('ACCESS_TOKEN'); //token是放在localStorage中
    if (token) {
        config.headers['Authorization'] = 'Bearer ' + token; // 让每个请求携带自定义 token 请根据实际情况自行修改
    }
    if (config.method == 'get') {
        config.params = {
            _t: Date.parse(new Date()) / 1000, //让每个请求都携带一个不同的时间参数，防止浏览器缓存不发送请求
            ...config.params
        }
    }
    return config;
}, (error) => {
    return Promise.reject(error);
})

//  响应拦截器中的error处理方法
const err = (error) => {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                console.log({
                    message: '系统提示',
                    description: '未授权，请重新登录',
                    duration: 4
                })
                break;
            case 403:
                console.log({
                    message: '系统提示',
                    description: '拒绝访问'
                  })
                break;
                // ... 视情况增加
        }
    }
    return Promise.reject(error)
}

//3.响应拦截器
Axios.interceptors.response.use(response => {
    const token = response.headers['Authorization'];
    if (token) {
        localStorage.setItem('ACCESS_TOKEN', token) //这是存在localStorage里面 也可以存在vuex里面 在做退出时记得清除local记录
    }
    return response.data; //去掉返回的请求配置对象什么的 直接返回结果
}, err)

export default Axios;

想起来了 有时候业务需求需要取消请求  再配置一下取消请求（axios.CancelToken 这个CancelToken 的c是大写的）

import Axios from "@/request/ruquest.js"
import axios from "axios";
let cancelRequest = null;
export const getMessage = () => { 
    if (cancelRequest !== null) {
        cancelRequest()
    }
    return Axios({
        url: '/comments',
        method: 'post',
        cancelToken: new axios.CancelToken(function executor(c) {
            cancelRequest = c
        })
    })
}

取消请求效果如下：