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

首先先安装axios:

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

安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

引入

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

// request.js
import axios from 'axios'
// 一些请求的基本配置 
const service = axios.create({
  baseURL: process.env.API_ROOT,// 接口的域名地址
    // timeout: 5000,
    withCredentials: true,
    headers: {'Content-Type': 'application/json;charset=utf-8'}
})
 
// 输出方法
export default function request(url, data = {}, method = 'post') {
  return new Promise((resolve, reject) => {
    const options = {
      url,
      method,
      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)
  }
}

最后在组件中使用

// index.vue
import API from '@/api/api.js'
 
export default {
    created(){
      let data = {} //请求参数
      API.login(data)
      .then(res => {
        //请求成功
      }).catch(err => {
           //请求失败
      })
    }

转载于: https://blog.csdn.net/laishaojiang/article/details/81287650