发起请求
可以通过向 axios 传递相关配置来创建请求
语法：axios(config)
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
name: 'Fred',
},
})语法：axios(url[, config])
// 发送 GET 请求（默认的方法）
axios('/user/12345');简写
| 请求方法的别名 |
|---|
| axios.get(url[, config]) |
| axios.delete(url[, config]) |
| axios.post(url[, data[, config]]) |
| axios.put(url[, data[, config]]) |
| axios.patch(url[, data[, config]]) |
注意：在使用别名方法时， url、method、data 这些属性都不必在配置中指定。
创建实例
语法：axios.create([config])
const service = axios.create({
method: 'GET' //method默认配置为GET，可以不写
baseURL: 'https://.../api/',
timeout: 5000,
});请求配置
这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。
url
url 是用于请求的服务器 URL
url: '/user',method
method 是创建请求时使用的方法
method: 'get', // defaultbaseURL
baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。
它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',params
params 是即将与请求一起发送的 URL 参数
params: {
ID: 12345
},data
data 是作为请求主体被发送的数据
只适用于这些请求方法 PUT, POST, 和 PATCH
data: {
firstName: 'Fred'
},timeout
timeout 指定请求超时的毫秒数(0 表示无超时时间)
如果请求话费了超过 timeout 的时间，请求将被中断
timeout: 1000,cancelToken
cancelToken 指定用于取消请求的 cancel token
cancelToken: new CancelToken(function (cancel) { })响应结构
某个请求的响应包含以下信息
data
data 由服务器提供的响应
data: {},status
status 来自服务器响应的 HTTP 状态码
status: 200,headers
headers 服务器响应的头
headers: {},config
config 是为请求提供的配置信息
config: {},配置默认值
全局的 axios 默认值
axios.defaults.baseURL
axios.defaults.baseURL = 'https://api.liaooo.cn';自定义实例默认值
const service = axios.create({
baseURL: 'https://api.liaooo.cn'
});
//或
service.defaults.baseURL = 'https://api.liaooo.cn'配置的优先顺序
配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。这里是一个例子：
// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();
// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;
// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
timeout: 5000
});拦截器
在请求或响应被 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);
});为自定义 axios 实例添加拦截器
const service = axios.create();
service.interceptors.request.use(function () {/*...*/});取消（使用 cancel token 取消请求）
可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：
const CancelToken = axios.CancelToken
const source = CancelToken.source()
axios
.get('/user/12345', {
cancelToken: source.token,
})
.catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message)
} else {
// 处理错误
}
})
axios.post(
'/user/12345',
{
name: 'new name',
},
{
cancelToken: source.token,
}
)
// 取消请求（message 参数是可选的）
source.cancel("I am message")还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
// cancel the request
cancel();错误处理
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
//请求被发出，服务器响应的状态码不在2xx的范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
//请求已发出，但未收到响应
console.log(error.request);
} else {
//设置请求时发生了错误
console.log('Error', error.message);
}
console.log(error.config);
});
发表回复