简单使用
- 安装
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文件,封装及使用的代码如下所示
- 为什么要对axios进行封装?
//封装 “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);
}