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,是不是感觉本人又提高了很多,让咱们一起致力,走向巅峰。