1. axios 认识
- Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
- 特点:
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
2. axios发起网络请求的几种方式
axios.request(config)
axios.get(url[, config]) * 发起GET请求
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]]) * 发起POST请求
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
等等.
3. axios 配置默认值/default
- axios.defaults.baseURL = ‘https://api.example.com’
配置各个请求中的默认路径 ,会自动拼接到url前面
常用 - axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
配置默认的token
- axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’
配置默认的Content-Type
4. 请求后的服务器的响应结构
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {},
// 'request'
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
5. axios请求参数问题
a. 参数的存放位置
get请求
的参数以键值对的方式跟在url后面的,而post请求
的参数是以键值对的方式在请求体里的
post请求传参时注意:
- 在请求头设置Content-Type字段的值
//可以针对post请求做一个全局的设置,避免每个请求都要设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
原因: 只有当’contentType’为"application/x-www-form-urlencoded",tomcat才会去读取post请求在请求体中传递的数据。
2. 用Qs.stringify()
将对象序列化成URL的形式:
import qs from 'qs' //qs是axios里面自带的,所以直接引入就可以了
data = qs.stringify(data)
原因: post请求参数是以键值对的形式存在请求体里,用Qs.stringify()就是把传入的对象转换为键值对。
4. 拦截器
在请求或响应被 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);
});
- 若想在某个效果中
移除拦截器
// 给拦截器命名
var myInterceptor = axios.interceptors.request.use(...);
//用eject移除拦截器
axios.interceptors.request.eject(myInterceptor);
5. axios 在vue项目中的应用
npm 安装axios
npm install axios
在main.js 中引入
npm axios from 'axios'
将axios挂载到vue原型
Vue.prototype.$http = axios
之后请求数据就可以直接用 this.$http 结合 await 和 async 来请求数据
eg:
async myData() {
// 发起一个get请求
const data = await this.$http('url')
}