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

首先先安装axios:

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

安装

使用 npm:

[code]$ npm install axios

使用 bower:

[code]$ bower install axios

使用 cdn:

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

引入

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

[code]// 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

[code]// 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

最后在组件中使用

[code]// index.vue
import API from '@/api/api.js'

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

over~