vue中axios的深入使用

如上所示一條簡單的請求數據，用到了vue中axios,promise,qs等等

這里我將vue中用到的axios進行了封裝方便日后使用 

先對工具類進行封裝utils/axios.js:

// 引入模塊
import axios from "axios"
import qs from 'qs'
 
// 是否允許跨域
axios.defaults.withCredentials=true;
 
// axios初始化：延遲時間，主路由地址
let instance = axios.create({
  baseURL: 'https://easy-mock.com/mock/5b7bb6b9d02c1e7f50b4102f/example/',
  timeout: 10000,
});
 
// 設置攔截器
instance.interceptors.request.use(function(config){
  //在發送請求之前做某事
  return config;
},function(error){
  //請求錯誤時做些事
  return Promise.reject(error);
});
//響應攔截器
instance.interceptors.response.use(function(response){
  //對響應數據做些事
  return response;
},function(error){
  //請求錯誤時做些事
  return Promise.reject(error);
});
 
// 是否銷毀攔截器
// 1.給攔截器起個名稱 var myInterceptors = instance.interceptors.requesst.use();
// 2.instance.interceptors.request.eject(myInterceptor);
 
// 請求成功的回調
function checkStatus(res) {
  //請求結束成功
  if (res.status === 200 || res.status === 304) {
    return res.data
  }
  return {
    code: 0,
    msg: res.data.msg || res.statusText,
    data: res.statusText
  }
  return res
}
// 請求失敗的回調
function checkCode(res) {
  if (res.code === 0) {
    throw new Error(res.msg)
  }
  return res
}
//模塊化導出
export default {
  get(url, params) {
    if (!url) return;
    return instance({
      method: 'get',
      url: url,
      params,
      timeout: 30000
    }).then(checkStatus).then(checkCode)
  },
  post(url, data) {
    if (!url) return;
    return instance({
      method: 'post',
      url: url,
      data: qs.stringify(data),
      timeout: 30000
    }).then(checkStatus).then(checkCode)
  },
  postFile(url, data) {
    if (!url) return;
    return instance({
      method: 'post',
      url: url,
      data
    }).then(checkStatus).then(checkCode)
  }
}

 

上述源碼中我已將注釋標清，大家看源碼就會明白都是些什么東西

下來為了方便使用 ，我們需要將這些方法放在全局中供我們更加便利的使用：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "./utils/axios"
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

通過Vue.prototype原型鏈的方式供全局都可調用

接下來是引入頁面

index.vue

<template>
  <div class="home">
    <h3>這里是首頁</h3>
 
  </div>
</template>
<script>
    export default {
      methods: {
        loadData: function () {
          let s = new Promise((resolve,reject) => {
            this.$http.get("query",{name:"任嘉慧"})
              .then(res => {
                console.log(res);//獲取數據
//                可通過resolve發送給后端一些參數:resolve(res.data.xxx);
              })
              .catch(error => {
                console.log(error);
              })
          });
        }
      },
      mounted () {
        this.loadData();
      }
    }
</script>
<style scoped>
  .home {
    width: 100%;
    flex: 1;
    overflow-y: auto;
  }
</style>

 

其實重點都是axios的深入使用，查看api就可，博主推薦查看這篇文章：https://www.cnblogs.com/libin-1/p/6607945.html

關於模塊化的導出博主再以前的文章中又有整理過：https://www.cnblogs.com/bgwhite/p/9298794.html

其次，再源碼中我已經將注釋標明，如果還有不懂的小伙伴可以留言哦。