Axios的根本使用 - ToB企服应用市场:ToB评测及商务社交产业平台

npm install axios

复制代码

yarn add axios

复制代码

// 发起一个post请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});

复制代码

/**** request.js ****/
// 导入axios
import axios from 'axios'
//1. 创建新的axios实例，
const service = axios.create({
//这里写请求配置，如
//url(目标资源地址)
//method(方法)
//data(数据)
//timeout(请求超时的毫秒数)
//等等，详见后面的“请求配置”
baseURL: 'https://api.example.com',
timeout: 3000
})
// 2.请求拦截器
service.interceptors.request.use(
config => {
//发请求前做的一些处理，如数据转化，配置请求头，设置token，设置时间戳等
//数据转化
config.data = JSON.stringify(config.data);
//配置请求头
config.headers = {'Content-Type':'application/x-www-form-urlencoded'};
//添加认证令牌token
const token = localStorage.getItem('token')
if (token) {config.headers.Authorization = `Bearer ${token}`}
//加个时间戳
config.params = {
...config.params,
t: new Date().getTime(),
};
return config;
}, error => {
console.log(error)
Promise.reject(error)
})
// 3.响应拦截器
service.interceptors.response.use(
response => {
//这里写接收到响应数据后的一些处理
// 未设置状态码则默认成功状态
const code = res.data.code || 200
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
// 二进制数据则直接返回
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
return res.data
}
// 当检测到请求状态码为401时，即未授权访问，触发以下逻辑
if (code === 401) {
//Relogin是重新登录的弹窗，开头要声明，这里只做演示
if (!isRelogin.show) {
isRelogin.show = true
ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
isRelogin.show = false
useUserStore()
.logOut()
.then(() => {
location.href = '/index'
})
})
.catch(() => {
isRelogin.show = false
})
}
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
} else if (code === 500) {
ElMessage({ message: msg, type: 'error' })
return Promise.reject(new Error(msg))
} else if (code === 601) {
ElMessage({ message: msg, type: 'warning' })
return Promise.reject(new Error(msg))
} else if (code !== 200) {
ElNotification.error({ title: msg })
return Promise.reject('error')
} else {
return Promise.resolve(res.data)
}
return response;
}, error => {
//这里做一些错误处理
console.log('err' + error)
let { message } = error
if (message == 'Network Error') {
message = '后端接口连接异常'
} else if (message.includes('timeout')) {
message = '系统接口请求超时'
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常'
}
ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
return Promise.reject(error)
})
//4.导出axios实例
export default service

复制代码

/**** login.js ****/
import request from '@/utils/request'
// 登录方法
export function login(username, password, code, uuid) {
const data = {
username,
password,
code,
uuid
}
return request({
url: '/login',
headers: {
isToken: false,
repeatSubmit: false
},
method: 'post',
data: data
})
}

复制代码

// 必须是一个简单对象或 URLSearchParams 对象
params: {
ID: 12345
},

复制代码

// 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
data: {
firstName: 'Fred'
},

复制代码

// 如果请求时间超过 `timeout` 的值，则请求会被中断
timeout: 1000, // 默认值是 `0` (永不超时)

复制代码

{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 是服务器响应头
// 所有的 header 名称都是小写，而且可以使用方括号语法访问
// 例如: `response.headers['content-type']`
headers: {},
// `config` 是 `axios` 请求的配置信息
config: {},
// `request` 是生成此响应的请求
// 在node.js中它是最后一个ClientRequest实例 (in redirects)，
// 在浏览器中则是 XMLHttpRequest 实例
request: {}
}

复制代码

axios.get('/user/12345')
.then(function (response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});

复制代码

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';

复制代码

// 创建实例时配置默认值
const instance = axios.create({
baseURL: 'https://api.example.com'
});
// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

复制代码

// 使用库提供的默认配置创建实例
// 此时超时配置的默认值是 `0`
const instance = axios.create();
// 重写库的超时默认值
// 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
instance.defaults.timeout = 2500;
// 重写此请求的超时时间，因为该请求需要很长时间
instance.get('/longRequest', {
timeout: 5000
});

复制代码

//添加请求拦截器
axios.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error);
}
);
//添加响应拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
return Promise.reject(error);
}
);

复制代码

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

复制代码

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

复制代码

axios.get('/user/12345')
.catch(error =>{
if (error.response){
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);
});

复制代码

axios.get('/user/12345', {
validateStatus: function (status) {
return status < 500; // 处理状态码小于500的情况
}
})

复制代码

使用 <strong>toJSON</strong> 可以获取更多关于HTTP错误的信息。

复制代码

axios.get('/user/12345')
.catch(function (error) {
console.log(error.toJSON());
});

复制代码

const controller = new AbortController();
axios.get('/foo/bar', {
signal: controller.signal
}).then(function(response) {
//...
});
// 取消请求
controller.abort()

复制代码