axios网络请求
人的一生就像一篇文章，只有经过多次精心修改，才能不断完善。
你好，我是梦阳辰，期待与你相遇！
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
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
拦截请求和响应
转换请求和响应数据等等
支持多种请求方式:
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是将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，然后使用网络请求。
这样操作的缺点在于，对第三方框架依赖太大，如果第三方框架不在维护…。并且代码冗余。
新建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)
})
对请求进行拦截
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)
})
}
Don’t let dream just be your dream.
