vue中使用axios+Promise二次封裝ajax請求
阿新 • • 發佈:2018-11-15
首先先安裝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