vue中使用axios+Promise二次封装ajax请求

首先先安装axios:

中文文档地址 https://www.kancloud.cn/yunye/axios/234845

安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

引入

在项目中新建一个request.js文件

// request.js
import axios from 'axios'
// 一些请求的基本配置
const service = axios.create({
  baseURL: process.env.API_ROOT,// 接口的域名地址
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
  }
})

// 输出方法
export default function request(url, data = {}, method = 'post') {
  return new Promise((resolve, reject) => {
    const options = {
      url,
      method
    }
    if (method.toLowerCase() === 'get') {
      options.params = data
    } else {
      options.data = data
    }
    service(options)
      .then(res => {
        console.log('返回数据', res)
        resolve(res.data)
      })
      .catch(error => {
        reject()
        console.error(error)
      })
  })
}

 

然后在新建一个api.js文件，用于放接口api

// api.js
import request from '@/util/request'

const api= {
  // 接口1
  login(data) {
    return request('user/login', data)
  },
  // 接口2
  logout(data) {
    return request('user/logout', data)
  }
}

export default api

 

最后在组件中使用

// index.vue
import API from '@/api/api.js'

export default {
    created(){
      let data = {} //请求参数
      API.login(data)
      .then(res => {
        //请求成功
      }).catch(err => {
           //请求失败
      })
    }
}

 

over~