vue封装axios

安装axios

npm install axios --save

创建https文件

request.js放axios封装

api.js放项目请求接口

封装axios

//request.js
import axios from "axios";
import vuex from "../store/index.js";
import {
    Toast
} from "vant";
const httpAxios = axios.create(); //创建实例
let Config = {
    TIMEOUT: 6000, //设置超时时间为6秒
};
// axios 配置
httpAxios.defaults.timeout = Config.TIMEOUT;
httpAxios.interceptors.response.use(
    (response) => {
        return response;
    },
    (error) => {
        if (error.message.includes("timeout")) {
            Toast("请求超时，请稍后再试");
            return Promise.reject(error);
        }
        Toast("网络出错，请稍后再试");
        return Promise.reject(error);
    }
);
export function request(type = "get", url = "", params = {}) {
    return new Promise((resolve, reject) => {
        let data = {
            method: type,
            url: vuex.state.Api + url,
            data:params,
            headers: {
                "Content-Type": "application/json; charset=UTF-8",
            },
        }
        httpAxios(data).then((response) => {
            resolve(response.data);
        }).catch((error) => {
            reject(error);
        });
    });
}

api.js

import { request } from "./request";
// 用户注册
export function userRegister(parameter) {
    return request("POST", "接口地址", parameter);//parameter参数
}

使用

import { userRegister } from "@/https/api";
async register() {
    let res = await userRegister({data});//dada你要传的参数
    if (res.code == 1) {
        Toast("注册成功");
        this.$router.push("/login");
    } else {
        Toast(res.msg);
    }
}

axios跨域

在config的index.js文件中的dev属性中添加一个属性proxyTable:

proxyTable{
    '/api':{
        target:"URL",
        changeOrigin:true,
        pathRewrite:{
               '^/api':""
        }
    }
}