乐趣区

关于vue.js:axios封装二

jiezi

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

退出移动版