Axios网络请求

Axios 是一个基于 promise 的网络请求库

安装

Axios的应用是需要单独安装的 npm install --save axios

引入

组件中引入: import axios from "axios"

全局引用:

import axios from "axios"
​
const app = createApp(App);
app.config.globalProperties.$axios = axios
app.mount('#app')
​
// 在组件中调用
this.$axios

网络请求基本示例

get请求

axios({
    method: "get",
    url: "http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
}).then(res => {
    console.log(res.data);
})

post请求

温馨提示

post请求参数是需要额外处理的

1. 安装依赖: npm install --save querystring

2. 转换参数格式: qs.stringify({})

axios({
    method:"post",
    url:"http://iwenwiki.com/api/blueberrypai/login.php",
    data:qs.stringify({
        user_id:"iwen@qq.com",
        password:"iwen123",
        verification_code:"crfvw"
    })
}).then(res =>{
    console.log(res.data);
})

快捷方案

get请求

axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
    .then(res =>{
      console.log(res.data);
    })

post请求

axios.post("http://iwenwiki.com/api/blueberrypai/login.php", qs.stringify({
      user_id: "iwen@qq.com",
      password: "iwen123",
      verification_code: "crfvw"
    }))
      .then(res => {
        console.log(res.data);
      })

Axios网络请求封装

在日常应用过程中，一个项目中的网络请求会很多，此时一般采取的方案是将网络请求封装起来

在src目录下创建文件夹utils，并创建文件request，用来存储网络请求对象 axios

import axios from "axios"
import qs 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
})
​
instance.interceptors.request.use(
    config =>{
        if(config.method === "post"){
            config.data = qs.stringify(config.data)
        }
        return config;
    },
    error => Promise.reject(error)
)
​
instance.interceptors.response.use(
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
    error =>{
        const { response } = error;
        errorHandle(response.status,response.info)
    }
)
​
export default instance;

在src目录下创建文件夹api，并创建文件index和path分别用来存放网络请求方法和请求路径

// path.js
const base = {
    baseUrl:"http://iwenwiki.com",
    chengpin:"/api/blueberrypai/getChengpinDetails.php"
}
​
export default base

// index.js
import path from "./path"
import axios from "../utils/request"
​
export default {
    getChengpin(){
        return axios.get(path.baseUrl + path.chengpin)
    }
}

在组件中直接调用网络请求

import api from "../api/index"
​
api.getChengpin().then(res =>{
    console.log(res.data);
})

网络请求跨域解决方案

JS采取的是同源策略

同源策略是浏览器的一项安全策略，浏览器只允许js 代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据,这就是同源策略.

也就是说，当协议、域名、端口任意一个不相同时，都会产生跨域问题，所以又应该如何解决跨域问题呢

 

目前主流的跨域解决方案有两种：

1. 后台解决：cors

2. 前台解决：proxy

devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        changeOrigin: true
      }
    }
}

温馨提示

解决完跨域配置之后，要记得重启服务器才行哦！