axios封装二
1.开发环境 vue
2.电脑系统 windows 10 专业版
3.再开发的过程中,我们会使用到axios进行数据的交互,下面是我对axios的封装,代码如下:
3-1:整体目录结构如下:
//只是初期的封装,后面还会进行完善!
3-2:整体思路:为什么要进行封装?封装是为了更加的方便,统一管理,更加的高效!
3-3:在src目录下面新建一个文件,名字为:utils!在 utils下面新建一个js文件,request。这个request 是把axios进行封装!
3-3-1:request.js代码如下:
import axios from 'axios'
import qs from 'qs'
axios.defaults.timeout = 5000; //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头
axios.defaults.baseURL = 'http://192.168.0.106:3000/'; //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
//在发送请求之前做某件事
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config;
},(error) =>{
console.log('错误的传参')
return Promise.reject(error);
});
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
//对响应数据做些事
if(!res.data.success){
return Promise.resolve(res);
}
return res;
}, (error) => {
console.log('网络异常')
return Promise.reject(error);
});
//返回一个Promise(发送post请求)
export function fetchPost(url,params) {
return new Promise((resolve, reject) => {
axios.post(url,params)
.then(response => {
resolve(response);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
}
// 返回一个Promise(发送get请求)
export function fetchGet(url,param) {
return new Promise((resolve, reject) => {
axios.get(url,{params:param})
.then(response => {
resolve(response)
}, err => {
reject(err)
})
.catch((error) => {
reject(error)
})
})
}
export default {
fetchPost,
fetchGet,
}
3-4:在src目录下新建一个文件,api,api下面新建Login,Login文件下面新建 Login.js。目的,统一管理Login接口。
3-4-1:Login.js代码如下:
import {fetchPost,fetchGet} from '../../utils/request'
export function chen(chen) {
return fetchPost('/feng',chen)
}
//备注:导入请求,fetchPost表示post请求,fetchGet表示get请求。在项目中,根据需求选择。
fetchPost('/feng',chen) // '/feng' :表示请求地址 ; chen:表示请求需要传的参数。
3-5:在vue组件中使用,在vue组件中添加如下代码:
import {chen} from '../api/Login/Login'
3-5-1:在methods中添加如下代码:
methods: {
//页面已加载就向后台发送请求
chenget() {
var kk = {
name: '陈鹏'
}
chen(kk).then(res => {
console.log(res);
})
}
}
3-5-2:在mounted中添加如下代码:
mounted() {
this.chenget();
},
3-6:在vue.config.js中添加如下代码:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://192.168.0.109:3000',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '' //通过pathRewrite重写地址,将前缀/api转为/
}
}
}
}
}
3-7:在main.js中添加如下代码:
import axios from 'axios'
axios.defaults.baseURL = "/api";
3-8:运行项目,打开浏览器,你就会看到对应的后台请求的数据,效果如下:
3-9:本期的教程到了这里就结束啦,是不是很nice,是不是感觉自己又进步了很多,让我们一起努力,走向巅峰。
本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203177.html