![](http://47.106.11.228/wp-content/uploads/2023/08/图片-11-1024x460.png)
1.安装
PowerShell
npm install axios --save
2.基础使用
JavaScript
import { reactive } from 'vue'
import axios from 'axios'
const apidata = reactive([]);
axios.defaults.baseURL = 'http://jsonplaceholder.typicode.com/posts';
axios.get('/2')
.then(res => {
if (res.status == 200) {
apidata.value = res.data
}
}).catch(error => {
console.log(error);
});
3.封装axio函数
request.ts
JavaScript
import axios from "axios";
export function request(config:any){
const instance = axios.create({
baseURL:'http://jsonplaceholder.typicode.com/posts',
timeout:1000
})
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
if(error.response){
if(error.status == 500){
alert('服务器内部发生错误')
}
}
return Promise.reject(error);
});
//返回出去一个真实的请求
return instance(config)
}
/api/index
JavaScript
import { request } from "@/utils/request";
export function GetAPi(){
return request({
url:'/2',
method:'get'
})
}