Vue整合Axios

安装

npm install --save axios
npm install --save querystring

工具类

封装request.js文件方便后续使用

//引入
import axios from "axios";
import querystring from "querystring"

//处理响应函数
const errorHandle = (status,info) =>{
    switch(status){
        case 400:
            console.log("语意错误")
            break
        case 500:
            console.log("服务器意外")
            break
        default:
            console.log(info)
    }
}

//创建实例
const instance = axios.create({
    //公共配置
    timeout:5000
})

//拦截器
instance.interceptors.request.use(
    config=>{
        if(config.method === "post"){
            config.data = querystring.stringify(config.data)
        }
        return config
    },
    error=>{
        return Promise.reject(error)
    }
)
//获取数据前
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

使用

import axios from "../utils/request"

const api = {
    getUrl(){
        return axios.get("请求路径")
    }
}

export default api

页面渲染后调用：

<script>

import api from "../api/index"

export default {
    mounted(){
        console.log("渲染后")
        api.getUrl().then(res =>{
            console.log(res.data)
        })
    }
}
</script>

解决跨域

在vue.config.js文件中添加配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //解决跨域 proxy方式
  devServer:{
    proxy:{
      "/api":{
        target:"//产生跨越的地址（域名）",
        changeOrigin:true
      }
    }
  }
})

注意：修改此配置后需要重启服务