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

####首先先安装axios:

#安装 使用 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,// 接口的域名地址

// 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 => {

//请求失败

})

}