vue_Promise对axios封装_前端代理跨域

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模块；

  1. 首先用var声明创建了一个函数，这里函数如何创建按个人喜好
  2. GET方法将在其他vue组件调用，因此我们可以预设两个参数，url和data，用ES6语法给data设置默认值，因为有些请求不需要用到data，设置默认值防止报错
  3. 函数返回值是一个实例化的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了，直接改变封装即可，非常方便

——拦截器见下一篇文章