vue_Promise对axios封装_前端代理跨域
通常我们在前端开发中会使用到框架之一:vue框架
在vue中,作者推荐我们在请求数据是使用axios相关模块;
在实际的开发中接口量大,若不封装,需求或借口发生变化一个个改就会很麻烦;所以在项目的开发前建议使用Promise对axios进行封装:
第一步-封装
-
首先是get请求,先上代码,再进行解释
import axios from 'axios' /* API封装 */ /* get方法 */ var GET = function (url, data = "") { return new Promise((resolve, reject) => { axios.get(url, { params: data, timeout: 3000 }).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }
以上就是封装的代码,在这里首先创建了一个request.js文件,vue项目中安装了axios模块;
- 首先用var声明创建了一个函数,这里函数如何创建按个人喜好
- GET方法将在其他vue组件调用,因此我们可以预设两个参数,url和data,用ES6语法给data设置默认值,因为有些请求不需要用到data,设置默认值防止报错
- 函数返回值是一个实例化的Promise,而Promise封装了axios,Promise执行成功会执行resolve函数,失败会返回reject函数
-
然后是post方法
/* POST请求 */ var POST = function (url, data = "") { return new Promise((resolve, reject) => { axios.post(url, data, { timeout: 3000, /* 相关配置 */ }).then(response => { resolve(response) }).catch(error => { reject(error) }) }) }
封装方式和get一样,区别就在于传输数据的写法和相关配置的设置位置不同
-
其余方法类似,这里我们抛出就好
export {
GET, POST
}
第二步-创建接口文件
这里在同一目录下创建一个API_TYPE.js文件,用来管理所有接口
/* 跨域路由接口 */
var BASE_API = "/dev_api"
export const Indexdata = BASE_API + "/Indexdata.json"
export const Indexdata = BASE_API + "/Indexdata.json"
export const Indexdata = BASE_API + "/Indexdata.json"
export const Indexdata = BASE_API + "/Indexdata.json"
下面我多复制了几行,大致意思就是这样,声明并抛出接口,目的是方便管理
第三步-将封装的方法挂载到Vue对象的原型上
实现代码如下:
//在mine.js中引入我们抛出的方法
import { GET, POST } from './API/request'
//挂载到vue的prototype中
Vue.prototype.$GET = GET
Vue.prototype.$POST = POST
第四步-使用
举例在App.vue中使用:
//引入我们抛出的接口
import { Indexdata } from "./API/API_TYPE";
export default {
created() {
//直接在生命周期中使用vue对象中的$GET或$POST方法
this.$GET(Indexdata).then(response => {
console.log(response.data);
}).catch(error=>{
console.log(error)
});
}
};
至此,封装就完成了
新加接口时只需要在API_TYPE.js文件中添加,按需引入,改变时操作一个文件就可以了,
假如后期维护不使用axios了,直接改变封装即可,非常方便
——拦截器见下一篇文章