axios的基本使用

简单使用

• 安装

  npm install axios

• 引入使用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

axios({
    url: "请求路径"
}).then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
})

axios返回的是一个promise对象，所以调用then即可

• axios的几种请求方式
  • axios(config)
  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

axios发送并发请求

axios.all([
  axios({
        url: "请求路径1"
    }),
  axios({
        url: "请求路径2",
        params: {
             //请求参数
            //type: "pop",
            //page: 3
        }
    })]).then(results => {
        console.log(results)
    })

axios的配置信息

有的时候，向服务器传递的有些参数都是固定的，那么这些固定的参数就可以进行一下抽取，使用axios的全局配置

• 全局配置：axios.defaults.选项=“”
  

• 常见的配置选项：

  • 请求地址
    url: “请求地址”
  • 请求类型
    method: ‘get/post……’
  • 请求的根路径
    baseURL: “根路径”
  • 请求前的数据处理
    transformRequest: [function(data) {}]
  • 请求后的数据处理
    transformResponse: [function(data) {}]
  • 自定义的请求头
    headers: {‘x-Requested-With’:’XMLHttpRequest’}
  • URL查询对象
    params: {}
  • 超时设置
    timeout: number（ms）

axios实例和模块封装

当开发的项目特别大的时候，会使用多个服务器对对应的请求做出响应（后端此时可能会使用反向代理服务器）ps：后端菜鸟，如果有错，希望大神指正

此时的请求IP地址就不唯一，需要对axios创建实例

• 创建axios实例

const instance = axios.create({
    baseURl: "根路径",
    // timeout: 5000,
})

instance({
    url: "/home/multidata",
}).then(data => {
    console.log(data);
})

• 封装
  • 为什么要对axios进行封装？
    简单来说就是为了减少对第三方框架的依赖程度。如果某一天要换一个第三方框架或者axios不再进行维护，那么如果不进行封装的话，就需要在所有用到axios的地方全都进行修改甚至重写；相反如果将axios封装，使用自己封装好的axios，再进行修改只需要修改封装的axios即可，工作量大大降低。
  • 对axios进行封装
    在src文件夹下建立network\request.js文件，封装及使用的代码如下所示

//封装 “network\request.js”
import axios from "axios"
export function request(config) {
    const instance = axios.create({
        baseURL: "http://123.207.32.32:8000",
        timeout: 5000,
    });

    return instance(config);
}

//使用 “main.js”
import { request } from "./network/request"

request({
    url: "/home/multidata",
}).then(res => {
    console.log(res);
}).catch(err => {
    consolr.log(err);
})

拦截器

axios提供了拦截器，用于在发送请求或者得到响应后进行相应的处理。拦截器拦截：请求成功、请求失败、响应成功、响应失败

1.请求拦截

• 作用（应用场景）
• config（请求）中的信息有一些不符合服务器的要求
• 在发送网络请求时，希望在界面显示一个请求的图标
• 对于某些特别的网络请求，必须携带一些特殊的信息。例如登录才能查看的页面的请求，就需要对请求进行拦截，查看请求中的token，判断用户是否登录
• 代码

// 拦截请求
instance.interceptors.request.use(aaa => {
        // 对拦截到的请求做一些处理
        console.log(aaa);
        // 对拦截到的请求进行一系列操作后，需将config返回
        return aaa;
    }, err => {
        console.log(err);
    })

2.响应拦截

instance.interceptors.response.use(res => {
    console.log(res);
    // 直接返回响应的数据即可
    return res.data;
}, err => {
    console.log(err);
})

完整代码：

import axios from "axios"
export function request(config) {
   //1.创建实例
    const instance = axios.create({
        baseURL: "根路径",
        timeout: 5000,
    });

    //2. axios的拦截器
    // 拦截请求
    instance.interceptors.request.use(config => {
        // 对拦截到的请求做一些处理
        console.log(config);
        // 对拦截到的请求进行一系列操作后，需将config返回
        return config;
    }, err => {
        console.log(err);
    })

    // 拦截响应
    instance.interceptors.response.use(res => {
        console.log(res);
        // 直接返回响应的数据即可
        return res.data;
    }, err => {
        console.log(err);
    })
	//3.发送真正的网络请求
    return instance(config);
}