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);
});
});
},
};