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文件夹（只要存放工具类）

一、在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
}

二、在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

三、在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/>'
})

 

四、在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了 ，本身摸索的 ，写的很差  勿喷！