作为一名前端工程师,请求后台接口获取数据是必然的,也是要求前端人员需要掌握的必备技能。但你一段时间只用一种请求方法,突然让你换成其他方式不一定能够立马实现的来,为此总结了一下前端请求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>
Logo

前往低代码交流专区

更多推荐