VUE之axios的封装

Vue 185 0 2024-03-08

VUE之axios的封装

先安装axios和querystring,安装命令:

npm install --save axios

npm install --save querystring


完成后再src目录下新建文件夹utils,然后在该文件夹下新建文件request.js做为封装代码文件,内容代码如下:

import axios from "axios";
import querystring from "querystring";

const errorHandle = (status, info) => {
    switch (status) {
        case 400:
            console.log("语义有误"); break;
        case 401:
            console.log("服务器认证失败"); break;
        case 403:
            console.log("服务器拒绝访问"); break;
        case 404:
            console.log("地址错误"); break;
        case 500:
            console.log("服务器遇到意外"); break;
        case 502:
            console.log("服务器无响应"); break;
        default:
            console.log(info); break;
    }
}

const instance = axios.create({
    //网络请求的公共配置
    timeout: 5000
})

//最常用拦截器2个:

//1、发送数据之前
instance.interceptors.request.use(
    config => {
        if (config.method === "post") {
            config.data = querystring.stringify(config.data);
        }
        //config:包含着网络请求的所有信息
        return config;
    },
    error => {
        return Promise.reject(error);
    }
)

//2、获取数据之前
instance.interceptors.response.use(
    response => {
        return response.status === 200 ? Promise.resolve(response) : Promise.reject(response);
    },
    error => {
        const { response } = error;
        errorHandle(response.status, response.info);
    }
)

export default instance;

调用方法,在需要调用的组件中引入文件request.js,代码如下:

import axios from "../utils/request";
export default {
  data(){
    return {
      axiosRes:''
    }
  },
  mounted() {
    axios.get('http://www.xxx.com/api/xxx.php').then(res => {
      console.log(res.data);
      this.axiosRes = res.data;
    })
  }
}

上一篇:常见npm创建VUE项目或安装依赖时出现错误解决方法

下一篇:vue3+typescript+router+axios+element-plus+icons安装与配置

讨论数量:0

请先登录再发表讨论。 2024-06-14

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链