关于vue.js:axios封装二

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