安装axios
yarn add axios vue-axios
创建ts文件
在src目录下新建utils文件夹，并在utils文件夹里创建三个文件
我命名分别为
- http.ts 用于对axios的请求和响应做拦截
- request.ts 用于封装请求方式
- api.ts 存放具体接口
代码如下
http.ts
const baseURL = '';
import axios from 'axios'
const $http = axios.create({
//设置默认请求地址
baseURL,
//设置请求超时时间
timeout: 5000,
//设置请求头
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
})
// 先导入vuex,因为我们要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from '../store/index';
// 请求拦截器
$http.interceptors.request.use(config => {
// 每次发送请求之前判断vuex中是否存在token
// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
}, error => {
return console.error(error);
})
//响应拦截
$http.interceptors.response.use(res => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
if (res.status === 200) {
return Promise.resolve(res);
} else {
return Promise.reject(res);
}
}, error => {
if (error.res.status) {
switch (error.res.status) {
//这里可以对响应状态码进行拦截，处理不同的状态展示不同的交互效果
// 404请求不存在
case 404:
console.log('网络请求不存在')
break;
}
return Promise.reject(error.res);
}
})
// 别忘记了
export default $http
request.ts
//导入request.ts 目录下的$http
import $http from "./http";
export function get(url:string,params?:any) {
return new Promise((resolve, reject) => {
return $http({
url,
method: 'get',
data: params
}).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
}
api.ts
export default {
getAPI: (params?: any) => get('/api/xxx', params),
}
哪里使用哪里搬
因为找了半天没找到全局注册的方法 就在具体的页面里直接引入使用了，如果有大佬看见这个文章，请教一下全局注册的方法，辛苦告知。
举个例子
在HomeView.vue里使用
import { onBeforeMount } from "vue";
import getAPI from "../utils/api";
export default {
setup() {
// 接口调用
const getData = async () => {
const res = await getAPI.getAPI()
console.log(res)
}
onBeforeMount(() => {
getData()
})
return {getData}
}
}
部分内容来自网络，此文章是记录第一次使用ts封装在vue里使用axios的方法，作为自己的一个记录，也是给大家提供的一个分享，涉及到的原作者如果觉得被冒犯可以私聊我，我会下掉
