what is axios
- The most popular ajax request library on the front end
- react/vue officially recommends using axios to send ajax requests
axios features
- Promise-based asynchronous ajax request library
- Both the browser end and the node end can be used
- Support for request/response interceptors
- Support Request Cancellation
- Request/Response Data Conversion
- Batch multiple requests
Axios common syntax
axios(config) 通用/最本质的发任意类型请求的方式
axios(url[,config]) 可以只指定url发get请求
axios.request(config) 等同于axios(config)
axios.get(url[,config]) 发get请求
axios.delete(url[,config]) 发delete请求
axios.post(url[,data,config]) 发post请求
axios.put(url[,data,config]) 发put请求
axios.defaults.xxx 请求默认全局配置
axios.interceptors.request.use() 添加请求拦截器
axios.interceptors.response.use() 添加响应拦截器
axios.create([config]) 创建一个新的axios(他没有下面的功能)
axios.Cancel() 用于创建取消请求的错误对象
axios.CancelToken() 用于创建取消请求的token对象
axios.isCancel() 是否是一个取消请求的错误
axios.all(promise) 用于批量执行多个异步请求
Axios Difficult Grammar—create
axios.create(config) : Create a new axios object to repackage the axios request
Create a new axios object according to the specified configuration, that is, each axios has its own configuration. The new axios exclusive is just that there is no method for canceling requests and batch requests, and all other syntaxes are consistent.
Why this syntax?
- Requirements, the configuration required by some interfaces in the project is different from the configuration of other interfaces
- Solution: Create 2 new axios, each with its own configuration, corresponding to different requirements in the interface request
easy to use
const instance1 = axios.create({
baseURL:"http://localhost:3000"
})
const instance2 = axios.create({
baseURL:"http://localhost:4000"
})
// 同时请求 端口号 3000 4000
// 使用instance1发请求
instance1({
url:"/posts"
})
// 或
instance1.get("/posts")
// 使用instance2发请求
instance2({
url:"/posts"
})
// 或
instance2.get("/posts")
Axios interceptor interceptors
Intercept every request and response you make, and handle it accordingly.
request interceptor
Will run before you send the request to process the request
For example: the function of this request interceptor is to judge whether there is a token for each request, and add the token to the request header if the token exists. The background will judge whether my token has expired.
// http request 拦截器
instance.interceptors.request.use(
config => {
console.log('数据加载中……')//出现加载中动画
const token = sessionStorage.getItem('token')
if (token ) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.authorization = 'Bearer ' + token //请求头加上token
}
return config
},
err => {
return Promise.reject(err)
}
);
response interceptor
Will run after receiving the response and process the response
instance.interceptors.response.use(
response => {
//成功请求到数据
console.log('加载中动画结束,hide')//数据请求成功,自然加载中动画隐藏
//这里根据后端提供的数据进行对应的处理
return response.data;
},
error => {
//响应错误处理
console.log('error',error);
let text = error ? '404' : '网络异常，请重试';
console.log(text)
return Promise.reject(error)
}
);
Axios configuration baseURL
Global axios defaults
// 直接使用axios添加默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Global axios defaults
// 先创建一个实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
withCredentials: true, // 当跨域的时候发送cookie
timeout: 5000 // 超时时间
})
// 使用创建的实例添加默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
full configuration
// config/http.js
import axios from 'axios';
import {
Toast } from 'vant';
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_URL,
timeout: 60 * 1000,
withCredentials: false, //表示跨域请求时是否需要使用凭证
// headers: { 'Content-Type': 'application/json' },
});
// 添加请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
//比如某些页面需要登录，在这里可以判断是否登录，也可以设置请求头等内容
// if (store.getters.token) {
// // 让每个请求携带token
// config.headers['Authorization'] = 'Bearer ' + store.getters.token
// }
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
let res = response.data;
console.log(res);
if (res.error !== 0 && res.data) {
Toast(res.data);
}
return res;
},
error => {
// 对响应错误做点什么：统一进行响应错误的处理
Toast(error.message);
// console.dir(error);
return Promise.reject(error);
}
);
/**
* 发送ajax请求
* @param {String} url 请求地址
* @param {String} method 请求方法 get post
* @param {Object} data 请求参数
* @param {Object} ctx 请求头等相关参数
*/
const callApi = (url, method = 'get', data = {
}, ctx = {
}) => {
return service(
Object.assign(
{
},
{
url,
method,
params: method === 'get' ? data : {
},
data: method == 'post' ? data : {
},
},
ctx
)
);
};
/**
* GET请求接口
* @param {String} url 请求接口地址
* @param {Object} data 请求接口参数
* @param {Object} ctx 请求头等相关参数
*/
export const getApi = (url, data, ctx) => callApi(url, 'get', data, ctx);
/**
* POST请求接口
* @param {String} url 请求接口地址
* @param {Object} data 请求接口参数
* @param {Object} ctx 请求头等相关参数
*/
export const postApi = (url, data, ctx) => callApi(url, 'post', data, ctx);
// api/api.js
import {
getApi } from '@/utils/http';
/**
* 获取所有房间列表
* @param {Object} data 请求参数
*/
export const geAllRoomApi = data => getApi('/api/RoomApi/live', data);
/**
* 获取某个分类的房间列表
* @param {string | Number} data 房间分类或者房间id
*/
export const getCategaryOneApi = data => getApi('/api/RoomApi/live/' + data);
/**
* 获取所有房间分类
*/
export const getCategaryAllApi = () => getApi('/api/RoomApi/game');
/**
* 获取直播房间详情信息
* @param {string | Number} data 房间名或者房间id
*/
export const getRoomDetailApi = data => getApi('/api/RoomApi/room/' + data);