vite로 생성된 프로젝트는 액세스 인터페이스를
vue3使用axios。
사용 하고 인터페이스를 호출합니다.ts二次封装axios
vue3
설치 패키지axios
는 실제로 vue2와 크게 다르지 않습니다. 단지 ts와 js 사이에 약간의 차이가 있다는 것뿐입니다.
축을 캡슐화하는 이유
- 검색 헤더를 통합 방식으로 처리할 수 있습니다.
- 인터페이스의 통합 관리 촉진
- 콜백 지옥 해결
- 인터셉터를 구성하고, 다른 인스턴스에 대해 다른 인터셉터를 구성하고, 개체 형식으로 여러 인터셉터 구성을 수락하도록 지원합니다.
축 설치
npm install axios
플러그인 가져오기
를 사용하여 파일에 소개됨
import axios from "axios";
캡슐화 요청
먼저 src 아래에 utils 폴더를 만들고 request.ts 파일을 추가합니다.
import axios, {
AxiosInstance, AxiosRequestConfig } from 'axios'
class HttpRequest {
private readonly baseUrl: string;
constructor() {
this.baseUrl = 'http://localhost:8080'
}
getInsideConfig() {
const config = {
baseURL: this.baseUrl,// 所有的请求地址前缀部分(没有后端请求不用写)
timeout: 80000, // 请求超时时间(毫秒)
withCredentials: true,// 异步请求携带cookie
// headers: {
// 设置后端需要的传参类型
// 'Content-Type': 'application/json',
// 'token': x-auth-token',//一开始就要token
// 'X-Requested-With': 'XMLHttpRequest',
// },
}
return config
}
// 请求拦截
interceptors(instance: AxiosInstance, url: string | number | undefined) {
instance.interceptors.request.use(config => {
// 添加全局的loading..
// 请求头携带token
return config
}, (error: any) => {
return Promise.reject(error)
})
//响应拦截
instance.interceptors.response.use(res => {
//返回数据
const {
data } = res
console.log('返回数据处理', res)
return data
}, (error: any) => {
console.log('error==>', error)
return Promise.reject(error)
})
}
request(options: AxiosRequestConfig) {
const instance = axios.create()
options = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance, options.url)
return instance(options)
}
}
const http = new HttpRequest()
export default http
패키지 인터페이스
api 폴더에서 새 api ts 파일을 만듭니다.
참고: get 요청의 매개변수가 required 이므로
params
요청과 함께 전송되는 URL 매개변수입니다. 약어를 위해 ES6 분해가 채택됩니다. 즉, 다음params
분해가 추가 레이어를 추가해야 합니다params
.
게시 요청과 같은 다른 요청은 분해할 필요가 없으며 형식 매개변수는 괜찮습니다.
경우
src 폴더 아래에 새로운 api 폴더를 생성하고, 새로운 api.ts 파일을 생성하고, 그 안에 백그라운드로 요청하는 인터페이스를 작성합니다. 경로는 http://localhost: 8080/test입니다.
import http from '../utils/request'
//get有值
export function getTest(params: any) {
return http.request({
url: '/test',
method: 'get',
params
})
}
//get无值
export function (params: any) {
return http.request({
url: '/test',
method: 'get',
params
})
}
사용
요청된 구성 요소 사용
import {
ref, onMounted } from "vue";
import {
getFileList } from "../../api/index";
export default {
setup() {
onMounted(() => {
getTest().then((res: any) => {
console.log(res);
});
});
},
};