现在网路请求主要有以下几种方式：
1）传统的Ajax是基于XMLHttpRequest(XHR)：配置和调用方式等非常混乱，操作复杂
2）jQuery-Ajax ：重量级框架，不适合 vue.js 开发的项目
3）axios：轻量，支持 Promise API ，可以在 node.js 中发送 http请求等等
支持多种请求方式:
axios(config) ----- 通过 method 去指定请求方式，post / get
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]])
发送get请求
我要评论// 请求没有参数
axios.get('http://123.207.32.32:8000/category')
.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
// 2. 有请求参数
axios.get('http://123.207.32.32:8000/home/data', {
params: {
type: 'sell',
page: 1
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
发送并发请求
有时候 , 我们可能需求同时发送两个请求，使用axios.all, 可以放入多个请求的数组。
axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
axios.all([axios.get('http://123.207.32.32:8000/category'),
axios.get('http://123.207.32.32:8000/home/data', { params: { type: 'sell', page: 1 } })
]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
axios 的请求里面一些参数是固定的，比如 BaseURL ，可以将这些固定的属性抽离出来，放在 axios 的全局配置里面。
// axios 全局设置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000 //单位是 ms
axios.get('/category')
.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
请求类型为 get 时，参数放在 params 里面，拼接在 URL 后面。请求对象为 post 的时候，参数放在 request body 里面。
为什么要创建 axios 的实例呢?
当我们从 axios 模块中导入对象时, 使用的实例是默认的实例，在这个实例上设置默认配置是固定的，不能修改了。但是在开发中，某些配置是需要改变的。比如 BaseUrl 会随着服务器地址的不同而改变，并不是唯一的。所以，我们需要创建新的实例, 并且传入属于该实例的配置信息。
// 创建新的实例
const axiosInstance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
// 发送网络请求
axiosInstance({
url: '/category',
method: 'get'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
考虑到 axios 是一个第三方框架，我们需要将 axios 封装起来，哪里需要哪里导入就好。在 src 下新建一个 network 文件夹，用来存放与网络相关的代码
// 方法三 axios 里面封装的有 promise 所以可以直接返回一个 axios 实例
export function request(options) {
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
return instance(options)
}
---- main.js ---
// 方法三 接收返回的 promise 对象
request({
url: '/category'
}).then(res => console.log(res)).catch(err => console.log(err))
拦截器分为请求拦截和响应拦截。
// 请求拦截器
// instance.interceptors.request.use(拦截成功函数，拦截失败函数)
instance.interceptors.request.use(config => {
console.log('request 拦截成功');
// 拦截成果之后需要返回 config
return config
}, err => {
console.log('request 拦截失败');
return err
})
// 响应拦截器
instance.interceptors.response.use(config => {
console.log('response success!');
return config.data
}, err => {
console.log('response failed');
return err
})
请求拦截的作用
请求成功的拦截：1.比如 config 中的一些信息不符合服务器的要求，可以拦截。2.比如每次发送网络请求的时候，希望在界面中显示一个请求的图标。3.某些网络请求（比如登录（token）），必须携带一些特殊的信息。…
请求拦截中错误拦截较少，通常都是配置相关的拦截。可能的错误比如请求超时，可以将页面跳转到一个错误页面中。
响应拦截的作用
响应的成功拦截中，主要是对数据进行过滤
响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。
本文地址：https://blog.csdn.net/weixin_44381527/article/details/107490517
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论