前端請求接口的幾種方式總結

作爲一名前端工程師，請求後臺接口獲取數據是必然的，也是要求前端人員需要掌握的必備技能。但你一段時間只用一種請求方法，突然讓你換成其他方式不一定能夠立馬實現的來，爲此總結了一下前端請求API的方法，方便今後查閱。

一、vue-resource

優點：體積小、支持主流的瀏覽器、支持Promise API和URI Templates、支持攔截器。

安裝

    $ yarn add vue-resource
    $ npm install vue-resource

使用

	/*引入Vue框架*/
	import Vue from 'vue'
	/*引入資源請求插件*/
	import VueResource from 'vue-resource'
	
	/*使用VueResource插件*/
	Vue.use(VueResource)

常用的：

this.$http.get().then()
this.$http.post().then()
this.$http.jsonp().then()

學習鏈接：vue-resource

二、axios

vue2.0之後，就不再對vue-resource更新，而是推薦使用axios。基於 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 Node.js 中使用。

優點：

（1）在瀏覽器中發送 XMLHttpRequests 請求
（2）在 node.js 中發送 http請求
（3）支持 Promise API
（4）攔截請求和響應
（5）轉換請求和響應數據
（6）取消請求
（7）自動轉換爲JSON數據
（8）客戶端支持保護安全免受 CSRF/XSRF 攻擊

直接單獨使用：

get方式

axios.get().then().catch()

注：get方式傳參數可以直接跟在url後面，也可以通過param對象傳

post方式

axios.post().then().catch()

注：post方式傳參必須用對象傳

實際開發時，會將axios封裝，便於調用，並且使用攔截器控制請求狀態

封裝axios請求：

建api文件，在當前目錄封裝一個request.js文件，配置請求響應的攔截信息

/**
 * @file axios請求封裝
 */
import axios from 'axios'
import store from '../store/common'
import router from '../router/common'
import { Toast } from 'vant'

const Axios = axios.create({})

// 響應時間
Axios.defaults.timeout = 10000
// `withCredentails`選項表明了是否是跨域請求
Axios.defaults.withCredentials = true
// 設置默認請求頭
Axios.defaults.headers = {
  'X-Requested-With': 'XMLHttpRequest',
  'Content-Type': 'application/json; charset=UTF-8'
}

// 添加請求攔截器
Axios.interceptors.request.use(
  config => {
    // loadingInstance = Loading.service({
    //   fullscreen: true
    // });
    // 獲取token
    let token = store.getters.getToken
    if (token) {
      // 判斷是否存在token，如果存在的話，則每個http header都加上token
      config.headers.Authorization = token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加返回攔截器
Axios.interceptors.response.use(
  response => {
    if (
      typeof response != 'undefined' &&
      (response.data.code == 1001 ||
        response.data.code == 0 ||
        response.data.code == 1000 ||
        response.data.code == 1100 ||
        response.data.code == 1200)
    ) {
      return response.data
    } else if (response.data.code == 20008) {
      // 交班後選機器號
      checkCode('當前無人當班，請選擇機器號')
      router.replace('/center/machine')
      return response.data
    } else if (response.data.code == 1006) {
      // Token過期
      checkCode('登錄過期，請重新登錄')
      return response.data
    } else if (typeof response != 'undefined' && response.data.msg) {
      checkCode(response.data.msg)
      return response.data
    } else {
      checkCode('操作失敗，請重試')
    }
    return ''
  },
  error => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = '請求錯誤'
          break
          ...
        default:
      }
    } else {
      error.message = '無法連接服務器'
    }
    // 對返回的錯誤處理
    return Promise.reject(error)
  }
)

// 請求失敗錯誤信息提示
function checkCode(message) {
  // 關閉loading
  // loadingInstance.close();
  // 彈出錯誤信息
  Toast(message)
}
export default Axios

再建立一個index.js文件統一寫請求接口，如下圖：

全局暴露請求接口api，在vue.config.js文件中，配置chainwebpack，設置api的別名就可以全局使用api的接口了

chainWebpack: config => {
    config.resolve.alias
      .set('api', path.resolve('./src/api/index.js'))
    config.plugin('provide').use(webpack.ProvidePlugin, [
      {
        api: 'api'
      }
    ])
  }

接口請求：直接可以使用await api.getName（index.js下對應的接口名字）

await api.pageSalesOrderProsDetailData(this.formDate).then(response => {
        if (response.data) {
          this.goodsList = this.goodsList.concat(response.data.content)
          this.totalPages = response.data.totalPages
          if (response.data.content.length < this.formDate.pageCount) {
            this.$store.commit('SET_ALL_LOADING', true)
          }
        }
        this.$store.commit('SET_SALES_RANK_MSG', this.goodsList)
      })

vue中Axios的封裝和API接口的管理

三、ajax

使用Jquery封裝的ajax

$.ajax({
    url:"http://www.microsoft.com", //請求的url地址
    dataType:"json", //返回格式爲json
    async:true,//請求是否異步，默認爲異步，這也是ajax重要特性
    data:{"id":"value"}, //參數值
    type:"GET", //請求方式
    beforeSend:function(){
        //請求前的處理
    },
    success:function(req){
        //請求成功時處理
    },
    complete:function(){
        //請求完成的處理
    },
    error:function(){
        //請求出錯處理
    }
});

參數解釋：

$.ajax({
　　url:"   ",                 //請求的地址
　　type:"   ",              //請求方式兩種“get”或者“post”，默認爲“get”
　　timeout:             //設置請求超時時間（毫秒。
　　async:               //是否異步，默認設置爲true，所有請求均爲異步請求。如果需要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成纔可以執行。
　　cache:             //默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。
　　data:               //要求爲Object或String類型的參數，發送到服務器的數據。get請求中將附加在url後
　　dataType:      //預期服務器返回的數據類型。可用的類型如下：
				xml：返回XML文檔，可用JQuery處理。
				html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。
				json：返回JSON數據。
				jsonp：JSONP格式。使用SONP形式調用函數
　　beforeSend:   //發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭
　　complete:        //請求完成後調用的回調函數（請求成功或失敗時均調用）。
　　error:        //請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)
})

四、WebSocket

出現緣由：
前端和後端的交互模式最常見的就是前端發數據請求，從後端拿到數據後展示到頁面中。如果前端不做操作，後端不能主動向前端推送數據，這也是http協議的缺陷。因此，一種新的通信協議應運而生—websocket，他最大的特點就是服務端可以主動向客戶端推送消息，客戶端也可以主動向服務端發送消息，實現了真正的平等。

使用場景：
金融股票數據圖、即時訂單信息、天氣、token是否過期等不請求就返回最新數據的場景使用。

注：vue使用websocket需要注意以下幾點：

（1）首先需要判斷瀏覽器是否支持websocket。

（2）在組件加載的時候連接websocket，在組件銷燬的時候斷開websocket
（3）後端接口需要引入socket模塊，否則不能實現連接

舉個例子：

<template>
    <div>
        <button @click="send">發消息</button>
    </div>
</template>
<script>
export default {
    data () {
        return {
            path:"test",
            socket:""
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的瀏覽器不支持socket")
            }else{
                // 實例化socket
                this.socket = new WebSocket(this.path)
                // 監聽socket連接
                this.socket.onopen = this.open
                // 監聽socket錯誤信息
                this.socket.onerror = this.error
                // 監聽socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function () {
            console.log("socket連接成功")
        },
        error: function () {
            console.log("連接錯誤")
        },
        getMessage: function (msg) {
            console.log(msg.data)
        },
        send: function () {
            this.socket.send(params)
        },
        close: function () {
            console.log("socket已經關閉")
        }
    },
    destroyed () {
        // 銷燬監聽
        this.socket.onclose = this.close
    }
}
</script>

前端請求接口的幾種方式總結

一、vue-resource

二、axios

三、ajax

四、WebSocket

前端請求接口的幾種方式總結

認識可選鏈和雙問號語法

將後臺數據轉化爲符合el-tree組件的結構

探索elementUI組件的奧妙

element的日期選擇器el-date-picker分開的日期約束

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結