目录
什么是 axios?
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
在vue项目中导入axios
在终端用npm install --save axios进行安装
安装之后在要使用的页面组件中进行引入
import axios from 'axios'
特性
:从浏览器中创建 XMLHttpRequests
:从 node.js 创建 http 请求
:支持 Promise API
:拦截请求和响应
:转换请求数据和响应数据
:取消请求
:自动转换 JSON 数据
:客户端支持防御 XSRF
axios基本使用
//1.axios基本使用
import axios from 'axios'
axios({
url:'你的路径',//请求接口
method:'get'//请求方式:get
}).then(res =>{
console.log(res);//成功后在控制台输出结果
})
axios发送并发请求
//2.axios发送并发请求
import axios from 'axios'
axios.all([axios({
url: 'http://123.207.32.32:8000/home/multidata'//路径1
}), axios({
url: 'http://123.207.32.32:8000/home/data',//路径2
//专门针对get的请求参数
params: {
types: 'sell',
page: 5
}
})]).then(results => {//两个请求都得到数据后才根据结果得到数据
console.log(results);
})
使用全局的axios以及配置进行网络请求
//3.使用全局的axios以及配置进行网络请求
import axios from 'axios'
axios.defaults.baseURL = 'http://123.207.32.32:8000'//全局的基础路径
axios.defaults.timeout = 5000//超时配置
axios.all([axios({
url: '/home/multidata'//路径1
}), axios({
url: '/home/data',//路径2
//专门针对get的请求参数
params: {
types: 'sell',
page: 5
}
})]).then(results => {
console.log(results);
})
创建对应的axios实例
//4.创建对应的axios实例
import axios from 'axios'
const instance1 = axios.create({ //instance1为创建的axios实例
baseURL: 'http://123.207.32.32.8000',
timeout:5000
})
instance1({
url:'/home/multidata'
}).then(res =>{
console.log(res);
})
封装request模块
request.js文件(定义函数,对request进行封装):
//5.封装request模块
import axios from 'axios'
export function request(config,success,failure) {
//创建axios实例
const instance = axios.create({
baseURL:'http://152.136.185.210:7878/api/m5',
timeout:5000
})
//发送真正的网络请求
//return instance(config)
instance(config)
.then(res =>{
success(res);
})
.catch(err=>{
failure(err)
})
}
main.js文件(导入request.js调用request):
import axios from 'axios'
import {request} from "./network/request.js";
request({
url: '/home/multidata'
}, res => {
console.log(res);
}, err => {
console.log(err);
})
axios拦截器
请求拦截
//2.1请求拦截的作用
instance.interceptors.request.use(config=>{
console.log(config);
//2.1.1比如config的一些信息不符合服务器要求
//2.1.2比如每次发送网络请求时,都希望在界面中显示一个请求图标
//2.1.3某些网络请求(如登录请求(token)),必须携带一些特殊信息
return config//拦截过后还要返回,否则数据被拦截
},err => {
console.log(err);
})
响应拦截
//2.2响应拦截
instance.interceptors.response.use(res =>{
console.log(res);
return res.data;//返回得到数据里想要的部分
},err => {
console.log(err);
})