vue+axios+promise 封裝請求

axios特點

1.從瀏覽器中創建 XMLHttpRequests
2.從 node.js 創建 http 請求
3.支持 Promise API
4.攔截請求和響應 （就是有interceptor）
5.轉換請求數據和響應數據
6.取消請求
7.自動轉換 JSON 數據
8.客戶端支持防禦 XSRF

 

安裝axios和qs

npm i axios --save

引入axios

import axios from 'axios'

 

新建一個util文件夾（只要存放工具類）

1、在util中建一個request.js 文件  （主要存放所有請求，get,post等）

// request.js
import axios from 'axios';

// post請求
function postRequest(url, data = {}, method = 'post') {
    return new Promise((resolve, reject) => {
        axios({
                url: url,
                method: method,
                headers: {
                    'Content-Type': 'application/json'
                },
                data: data
            })
            .then(res => {
                //成功
                resolve(res.data)
            })
            .catch(res => {
                //失敗
                reject(res)
            })

    })
}

export default {
    postRequest: postRequest
}

2、在util文件夾中，新建一個api.js (主要存放接口文件)

 

下面簡單寫一個獲取輪播圖的 接口

//api.js

import requestAll from './request.js';

const apiUrl = '域名'
const webUrl = '域名
const baseUrl = apiUrl + '?act='

const api= {
    
    //獲取url補充靜態資源
    getUrl(){
        return webUrl;
    },

  //獲取輪播圖
  getBanner(session,language){
      let data = {
          session,
          language
      }
      return requestAll.postRequest(apiUrl + 'portal/index/top_banner', data);
  },
}
 
export default api

3、在vue的main.js文件中定義api屬性 （既是api暴露的接口）

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

//定義api屬性

import api from './util/api'
Vue.prototype.$api = api

new Vue({
    el: '#app',
    router,
    components: {
        App
    },
    template: '<App/>'
})

 

4、在index.vue中調用api請求接口

 

在method中調用

methods: {
         
            getMsg(){
                    var that = this;
                    this.$api.getBanner('fd5ce00d2ced178b731a1e11d00c8c27','korea')
                        .then(res =>{
                            console.log(res);
                            if(res.code == 200){
                                for(var x in res.data){
                                    res.data[x].image = that.$api.getUrl() + res.data[x].image;
                                }
                                
                                that.banner = res.data;
                            }
                        })
                        .catch(res =>{
                            console.log(res)
                        })
            }
            
            
        }

 

 

這樣就可以調用封裝好的 axios了 ，自己摸索的 ，寫的不好  勿噴！