前面的废话,简称前言
Axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
作为一个前端开者,我们除了要布局,还要跟后端开发者做数据交互。这时,我们就要用过axios请求数据了~~
话不多说,我们动手封装使用axios吧~~
动手(JS版)
1.安装
npm install --save axios vue-axios
2.在根目录上新建 api文件夹,在api文件夹中新建 axios.js 和 httpHelper.js
axios.js 用于初始化axios实例
//axios.js
import axios from "axios";
// 1.创建axios实例
const axiosInit = axios.create({
// 设置超时时间
time:2000
})
// 2.请求拦截器
axiosInit.interceptors.request.use((config) => {
//在发送之前做点什么
return config
}, (error) => {
//对请求错误做点什么
return error
})
// 3.相应拦截器
axiosInit.interceptors.response.use((response) => {
return response
})
// 4.导出
export default () => axiosInit
httpHelper.js 用于封装请求方法
import axios from 'axios'
const axiosInit = axios.create()
const baseURL = 'https://autumnfish.cn' //后台路径(这是一个开源的段子接口)
const httpHelper = {}
// 封装get方法(post类似)
httpHelper.get = (apiUrl, params, succCallback, errCallback) => {
let headers = {
'Content-Type': 'application/x-www-form-urlencoded',
}
let httpUrl = baseURL + apiUrl
axiosInit.get(httpUrl, params).then(
(res) => {
if (succCallback) {
succCallback(res)
} else {
console.log(res)
}
},
(err) => {
// alert(httpUrl)
if (errCallback) {
errCallback(err)
}
}
)
}
export default httpHelper
3. 在页面上调用接口~
<script setup>
import httpHelper from '../api/httpHelper'
httpHelper.get('/api/joke', {}, function (res) {
console.log('httpHelper.get', res)
})
</script>
4.最后的最后,我们成功拿到接口上的数据啦~
动手(TS版)
近期正在实践ts的学习成果,故把ts封装axios的方法也记录下来~~
1. 创建axios实例
// service.ts
import axios from 'axios';
const service = axios.create({
timeout: 5000, // 超时时间
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
validateStatus () {
return true;
},
});
service.interceptors.request.use(
(config: any) => {
console.log('请求拦截~!')
// 添加请求头以及其他逻辑处理
return config;
},
(error: any) => {
Promise.resolve(error);
}
);
/**
* 响应拦截器
*/
service.interceptors.response.use(
(response: any) => {
console.log('响应拦截:拦截事件可以放这里',response)
const res = response.data;
// 后端status错误判断
if ( res.status === 200 ) {
return Promise.resolve(res);
} else {
// 错误状态码处理
return Promise.reject(res);
}
},
(error: any) => {
// Http错误状态码处理
return Promise.reject(error);
}
);
export default service;
2. 封装请求方法
// api.ts
import service from './service'
const baseurl = import.meta.env.VITE_APP_API; // 后台地址
/**
* 封装get请求
* @param {string} url 请求连接
* @param {Object} params 请求参数
* @param {Object} header 请求的header头
*/
export const get = (url: string, params: object): object => {
return service({
url: baseurl + url,
method: 'get',
params: params,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
}
/**
* 封装post请求
* @param {string} url 请求连接
* @param {Object} params 请求参数
* @param {Object} header 请求的header头
*/
export const post = (url: string, params: object):object => {
return service({
url: baseurl + url,
method: 'post',
data: params,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
}
3. 请求接口
import { post , get } from '@/api/api.ts'
get('/api/users',{id:1}).then(users => {
console.log(users);
});
post('/api/users',{id:1}).then(users => {
console.log(users);
});