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,是不是感觉自己又进步了很多,让我们一起努力,走向巅峰。