怎样在vue项目中使用axios处理接口请求

vue项目中使用axios处理后端接口请求,参考摘录自axios官方文档vue

一、axios插件包安装ios

npm install axios --save

二、在main.js中全局引入axiosnpm

由于axios不是为了vue写的插件(插件内要处理)不支持vue.use()加载方式,为方便使用,能够将其挂载在vue原型上;全局使用this.$axiosaxios

import axios from 'axios'
Vue.prototype.$axios = axios

三、axios基本使用方法,axios请求返回的是一个promise对象后端

let api = 'http://'
this.$axios.post(api, {userId: '57393746696202243'}).then((response) => {
    console.log(response)
})

四、也能够经过向 axios 传递相关配置来建立请求api

let curBaseURL = 'http://'
let sUrl = 'api/login'
this.$axios({
        method: 'post',  // 请求方法-post/get(default)...
        url: sUrl,        // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。它能够经过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
        baseURL: curBaseURL,        // `headers` 是即将被发送的自定义请求头
        headers: {
          'W-SEQ': 'default'
        },        // `params` 是即将与请求一块儿发送的 URL 参数
        // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
        params: {          // ID: 12345
        },        // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
        // 在没有设置 `transformRequest` 时,必须是如下类型之一:
        // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
        // - 浏览器专属:FormData, File, Blob
        // - Node 专属: Stream
        data:{
          userId: '57393746696202243'
        },        // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
        // 若是请求话费了超过 `timeout` 的时间,请求将被中断
        // timeout: 1000,
        // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
        // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
        auth: {
          username: 'test',
          password: '1111'
        },
      })

五、总结promise

通常咱们在项目中使用,都会提早封装好axios请求的一些经常使用方法和属性,api接口也会统一管理,在下一篇中再详细记录——关于axios请求和api接口的统一管理浏览器

相关文章
相关标签/搜索