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