⑤ Axios网络请求以及跨域

Axios安装

cnpm install --save axios
post请求需要用到的：
cnpm install --save querystring(用来转换格式的)

引入

一般是全局引入，在main.js中引入

全局引入后的get和post方式使用

get请求方式

post请求方式

先引入：



**

把axios挂载到全局

1、在main.js中引入axios

import axios, { axios } from "axios";
//将axios挂载到全局
const app = createApp(App)
App.config.globalProperties.$axios = axios
app.mount('#app')

请求方式写法变成了这个

this.$axios.get('')
    .then(res => {

    })

    this.$axios.post('',querystring.stringify({
      id:''
    })).then(res => {

    })

axios网络请求封装

1、先安装axios和querystring
2、在src文件夹中创建一个文件夹utils，在下面创建一个请求

在里面写入

import { axios } from "axios";
import { qr } from "querystring";

//参考文档  https://www.kancloud.cn/yunye/axios/234845

//错误的监听
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
})

//拦截器最常用的

//发送数据之前
instance.interceptors.request.use(
    config => {
        if (config.methods === 'post') {
            conofig.data = qr.stringify(config.data)
        }
        //config：包含网络请求的所有信息
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

//获取数据之前
instance.interceptors.request.use(
    reponse => {
        return reponse.status === 200 ? Promise.resolve(response) : Promise.reject(response)
    },
    error => {
        const { reponse } = error
        //错误的处理才是我们最需要关注的
        errorHandle(response.status,reponse.info)
    }
)

export default instance

以上就全部封装完成了
在src下面创建一个api文件夹，下面创建两个js文件

在path中写

const base = {
    baseUrl: "",
    //写一个公共网址
    chengpin:""
    //路径有区别
}

export default base;

在index中写

import { axios } from "../utils/rq";
import { path } from "./path";

const api = {
    //成品详情地址
    //这个只是get方式的请求，post还需要另外写
    getChengPin() {
        return axios.get(path.baseUrl + path.chengpin)
    }
}

export default api;

**

使用方法

跨域

解决跨域的方案
1、后台解决：cors
2、前台解决：proxy

devServer: {
    proxy: {
      '/api': {
        target: 'http://baidu.com/',//产生跨域的地址   :80是默认的。不用写
        changeOrigin: true
      }
    }
  }

改成下面这样

使用方法：用地址的时候把前面的地址给取消掉就可以了（红线的）
！！！！设置完后要重启服务器