vue中关于axios的简单封装,api集中管理, typescript
axios 简单封装
在项目开发中进行项目开发时,对api接口进行集中管理非常重要
由于之前没有怎么封装过,只知道一些简单使用,所以最近根据网上的一些教程试着写了一下
-
我在src目录下新建了一个叫api 的文件夹,文件夹里新建了2个ts文件,api.ts和http.ts,
其中api.ts 用来集中管理后端接口http.ts用来对axios进行封装
-
在http.ts中对axios代码进行如下封装(下面是http.ts的完整代码)
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import qs from 'qs'
/**
* @auther boyyang-love
* @NODE_ENV 根据当前环境确定请求地址
* @development 开发环境、
* @production 生产环境
* @debug 测试环境
*/
const server: AxiosInstance = axios.create({
baseURL: process.env.NODE_ENV == 'development' ? 'http://1905.com': 'http://2020.com' ,
timeout: 3000,
})
/**
* axios请求拦截
* @return
* @config
*/
server.interceptors.request.use(
(config: AxiosRequestConfig): AxiosRequestConfig | Promise<AxiosRequestConfig> => {
if (config.method == 'get') {
config.headers.get['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'
}
if (config.method == 'post') {
config.headers.post['Content-Type'] = 'application/json;charset=utf-8'
}
// const token = '1111111';
// token && (config.headers.Authorization = token);
console.log(config)
return config;
},
(error) => {
return Promise.reject(error)
}
)
/**
* 响应拦截
* @return
* @response
*/
server.interceptors.response.use(
(response: AxiosResponse<any>): AxiosResponse<any> | Promise<AxiosResponse<any>> => {
return response
},
error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
console.log('错误请求')
break;
case 401:
console.log('未授权,请重新登录')
break;
case 403:
console.log('拒绝访问')
break;
case 404:
console.log('请求错误,未找到该资源')
break;
case 405:
console.log('请求方法未允许')
break;
case 408:
console.log('请求超时')
break;
case 500:
console.log('服务器端出错')
break;
case 501:
console.log('网络未实现')
break;
case 502:
console.log('网络错误')
break;
case 503:
console.log('服务不可用')
break;
case 504:
console.log('网络超时')
break;
case 505:
console.log('http版本不支持该请求')
break;
default:
console.log(`连接错误${error.response.status}`)
}
} else {
console.log('服务未连接')
}
return Promise.resolve(error.response)
}
)
/**
* 导出get请求方法
* @url 请求地址
* @params get请求参数
*/
export function get(url: string, params?: any): Promise<AxiosResponse> | Promise<AxiosResponse<any>> {
return new Promise((resolve, reject) => {
server.get(url, {
params: params
}).then((res) => {
resolve(res.data)
}).catch((err) => {
reject(err)
})
})
}
/**
* 导出post请求方法
* @url 请求地址
* @params post请求参数
*/
export function post(url: string, params: any): Promise<AxiosResponse> | Promise<AxiosResponse<any>> {
return new Promise((resolve, reject) => {
server.post(url, qs.stringify(params)).then((res) => {
resolve(res.data)
}).catch((err) => {
reject(err)
})
})
}
- 对后端接口进行集中管理(api.ts)
import {get, post} from "./https"
export const getHome = (params?: any) => get('/api/home', params)
export const postHome = (params: any) => post('/api/home', params)
- 在页面中调用api接口
// 引入
import { getHome } from "@/api/api.ts"
getHome({id: 1}).then((res :any) =>{
console.log(res)
})