人的一生就像一篇文章，只有经过多次精心修改，才能不断完善。
你好，我是梦阳辰，期待与你相遇！

文章目录

01.概述
02.axios请求方式
- 使用vue-axios(重点)
- axios模块封装（重点）
03.axios拦截器

01.概述

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios中文文档

Vue中发送网络请求有非常多的方式。那么,在开发中,如何选择呢?**选择一:**传统的Ajax是基于XMLHttpRequest（XHR)

为什么不用它呢?
非常好解释,配置和调用方式等非常混乱.

编码起来看起来就非常蛋疼.

所以真实开发中很少直接使用,而是使用jQuery-Ajax

选择二：
在前面的学习中,我们经常会使用jQuery-Ajax相对于传统的Ajax非常好用.

为什么不选择它呢?
首先,我们先明确一点:在Vue的整个开发中都是不需要
使用jQuery 了.

那么,就意味着为了方便我们进行一个网络请求,特意引用一个jQuery,你觉得合理吗?

jQuery的代码1w+行.

Vue的代码才1w+行.

完全没有必要为了用网络请求就引用这个重量级的框架.

选择三:官方在Vue1.x的时候,推出了Vue-resource.>Vue-resource的体积相对于jQuery小很多.>另外Vue-resource是官方推出的.

为什么不选择它呢?
在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource,并且以后也不会再更新.

那么意味着以后vue-reource不再支持新的版本时,也不会再继续更新和维护.

对以后的项目开发和维护都存在很大的隐患.

选择四:在说明不再继续更新和维护vue-resource的同时,作者还推荐了一个框架: axios

为什么用它呢?

axios有非常多的优点,并且用起来也非常方便.

为什么选择axios？
功能特点：
在浏览器中发送XMLHttpRequests请求

在node.js 中发送http请求

支持Promise API

拦截请求和响应

转换请求和响应数据等等

02.axios请求方式

支持多种请求方式:

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[ config]l)
axios.put(url[, data[, config]I)
axios.patch(url[, data[, configl]l)

安装axios：

npm install axios --save

使用：
默认get请求

import {  createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";
createApp(App).use(store).use(router).mount('#app')
axios({ 
    url:'http://123.207.32.32:8000/home/data',
    method:'get',
    params:{ //参数
        type:'pop',
        page:1
    }
}).then(res=>{ 
    console.log(res)
})

使用vue-axios(重点)

官网

vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装。

安装完axios，vue-axios之后可以在Vue项目下面node_modules/_vue-axios/src/index.js中看到vue-axios的源代码。使用 Vue 的插件写法，更符合 Vue 整体生态环境。

安装：

npm install --save axios vue-axios

将下面代码加入入口文件:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

Script:

按照这个顺序分别引入这三个文件： vue, axios and vue-axios

使用：

This wrapper bind axios to Vue or this if you’re using single file component.

你可以按照以下方式使用:

Vue.axios.get(api).then((response) => { 
  console.log(response.data)
})
this.axios.get(api).then((response) => { 
  console.log(response.data)
})
this.$http.get(api).then((response) => { 
  console.log(response.data)
})

有时候,我们可能需求同时发送两个请求使用axios.all,可以放入多个请求的数组.

axios.all()返回的结果是一个数组，使用axios.spread 可将数组[res1,res2]展开为res1, res2

import {  createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
createApp(App).use(store).use(router).mount('#app')
axios({ 
    url:'http://123.207.32.32:8000/home/data',
    method:'get',
    params:{ //参数
        type:'pop',
        page:1
    }
}).then(res=>{ 
    console.log(res)
})
//2.axios发送并发请求
axios.all([axios({ 
    url:'http://123.207.32.32:8000/home/multidata'
}),axios({ 
    url:'http://123.207.32.32:8000/home/data',
    params:{ //参数
        type:'sell',
        page:2
    }
})])./*then(results=>{ //多个请求成功后处理
    console.log(results)
})*/
then(axios.spread((res1,res2)=>{ 
    console.log(res1)
    console.log(res2)
}))

axios全局配置：
事实上,在开发中可能很多参数都是固定的.
这个时候我们可以进行一些抽取,也可以利用axiox的全局配置
在这里插入图片描述

Axios实例：
当服务器有多个时，可以创建多个Axios实例，进行网络请求。

axios模块封装（重点）

如果不封装，你可能在每个组件中导入axios，然后使用网络请求。
这样操作的缺点在于，对第三方框架依赖太大，如果第三方框架不在维护…。并且代码冗余。

新建network文件夹
新建request.js

import axios from "axios";
export function request(config,success,failure) { 
    //创建axios的实例
    const instance = axios.create({ 
        baseURL:'http://123.207.32.32:8000',
        timeout:5000
    })
    //发送真正的网络请求
    instance(config).then(res=>{ 
        success(res)
    }).catch(err=>{ 
        failure(err)
    })
}

使用：

//封装模块的使用
import { request} from "./network/request";
request({ 
    url:'/home/multidata'
},res=>{ 
    console.log(res)
},err=>{ 
    console.log(err)
})

对封装进行简化：

import axios from "axios";
export function request(config,success,failure) { 
    //创建axios的实例
    const instance = axios.create({ 
        baseURL:'http://123.207.32.32:8000',
        timeout:5000
    })
    //发送真正的网络请求
   return instance(config)//返回的是一个promise
}

使用：

import { request} from "./network/request";
request({ 
    url:'/home/multidata'
}).then(res=>{ 
    console.log(res)
}).catch(err=>{ 
    console.log(err)
})

03.axios拦截器

对请求进行拦截

axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理。如何使用拦截器呢?

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) { 
    // 在发送请求之前做些什么
    return config;
  }, function (error) { 
    // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
axios.interceptors.response.use(function (response) { 
    // 对响应数据做点什么
    return response;
  }, function (error) { 
    // 对响应错误做点什么
    return Promise.reject(error);
  });

例如:

import axios from "axios";
export function request(config,success,failure) { 
    //创建axios的实例
    const instance = axios.create({ 
        baseURL:'http://123.207.32.32:8000',
        timeout:5000
    })
    //拦截器
    instance.interceptors.request.use(config=>{ 
        // 在发送请求之前做些什么
        console.log("在发送请求之前做些什么")
        return config;
    },err=>{ 
        // 对请求错误做些什么
        return Promise.reject(err);
    })
    instance.interceptors.response.use(response=>{ 
        // 对响应数据做点什么
        return response
    },err=>{ 
        // 对响应错误做点什么
        return Promise.reject(err);
    })
    //发送真正的网络请求
    instance(config).then(res=>{ 
        success(res)
    }).catch(err=>{ 
        failure(err)
    })
}