526互联

04vue之axios

发布时间 2023-10-10 11:29:07作者: songxia777

1. 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF
  • Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中

2. 使用

2.1 下载安装

 npm i axios  -S

2.2 引入并使用模块

一般在main.js文件中

// 引入模块
import axios from 'axios'

也可以把 axios 挂载到vue的原型对象上面（不推荐）

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

// 全局配置 axios 的请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
// 把 axios 挂载到 Vue.prototype 上，供每个 .vue 组件的实例直接使用
Vue.prototype.$http = axios

// 今后，在每个 .vue 组件中要发起请求，直接调用 this.$http.xxx
// 但是，把 axios 挂载到 Vue 原型上，有一个缺点：不利于 API 接口的复用！！！

new Vue({
  render: h => h(App)
}).$mount('#app')

2.3 发送ajax请求

2.3.1 发送get请求

  mounted() {
    // 通过 vue组件 对象发送 ajax 请求
    const url = 'https://api.github.com/search/repositories?q=vu&sort=stars';
    //axios请求数据
    axios
     .get(url)
     .then(response => {
        //请求数据成功：response.data是返回的结果数据
        const dataObj = response.data;
      })
      .catch(error=>{
         // 请求失败处理
         console.log(error)
      });
  }

get传参

方法一：直接在 URL 上添加参数 ID=12345

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

方式二：通过 params对象 设置参数

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2.3.2 发送post请求

mounted () {
    axios
      .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

post传参

axios
  .post('/user', {
    firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName
  })
  
  .then(function (response) {
    console.log(response);
  })
  
  .catch(function (error) {
    console.log(error);
  });

2.4 执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
     .then(axios.spread(function (acct, perms) {
           // 两个请求现在都执行完成
  }));

3 axios API

3.1 请求方式

3.1.1 通用配置 axios(config)

// 1.  发送 GET 请求，参数一般在 params 对象中
axios({
  method: 'get',
  url: '/user/12345',
  params: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});


// 2.  发送 POST 请求，参数一般在 data 对象中
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

3.1.2 快捷配置

为方便使用，官方为所有支持的请求方法提供了别名，可以直接使用别名来发起请求

axios.request(config)

axios.post(url[, data[, config]])

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

注意：在使用别名方法时， url、method、data 这些属性都不必在配置中指定

3.1.3 配置项

注意只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法

url

用于请求的服务器 URL

method

请求方法，默认是get

baseURL

baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL

可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL

baseURL: "https://some-domain.com/api/"

params

即将与get请求一起发送的 URL 参数

 params: {
    ID: 12345
  }

必须是一个无格式对象(plain object)或 URLSearchParams 对象

paramsSerializer

是一个负责 params 序列化的函数

  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: "brackets"})
  },

data

作为请求主体被发送的数据，一般配合 post 请求使用

  data: {
    firstName: "Fred"
  },

适用于这些请求方法 "PUT", "POST", 和 "PATCH"

在没有设置 transformRequest 时，必须是以下类型之一：

  • string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  • 浏览器专属：FormData, File, Blob
  • Node 专属： Stream

transformRequest

允许在向服务器发送数据之前，修改请求的数据

  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

只能用在 "PUT", "POST" 和 "PATCH" 这几个请求方法

后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream

transformResponse

在传递给 then/catch 前，允许修改响应数据

 transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream

headers

即将被发送的自定义请求头

headers: {"X-Requested-With": "XMLHttpRequest"}

timeout

指定请求超时的毫秒数(0 表示无超时时间)，如果请求花费了超过 timeout 的时间，请求将被中断

timeout: 1000

withCredentials

表示跨域请求时是否需要使用凭证，默认false

withCredentials: false, // 默认的

adapter

允许自定义处理请求，以使测试更轻松

  adapter: function (config) {
    // TODO 返回一个 promise 并应用一个有效的响应
  },

auth

表示应该使用 HTTP 基础验证，并提供凭据

这将设置一个 Authorization 头，覆写掉现有的任意使用 headers 设置的自定义 Authorization头

  auth: {
    username: "janedoe",
    password: "s00pers3cret"
  },

responseType

服务器响应的数据类型，默认是json，可以是 "arraybuffer", "blob", "document", "json"

 responseType: "json", // 默认的

xsrfCookieName

是用作 xsrf token 的值的cookie的名称

xsrfCookieName: "XSRF-TOKEN", // default

xsrfHeaderName

是承载 xsrf token 的值的 HTTP 头的名称

xsrfHeaderName: "X-XSRF-TOKEN", // 默认的

onUploadProgress

允许为上传处理进度事件

  onUploadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

onDownloadProgress

允许为下载处理进度事件

  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

maxContentLength

定义允许的响应内容的最大尺寸

maxContentLength: 2000,

validateStatus

定义对于给定的HTTP 响应状态码是 resolve 或 reject

如果 validateStatus 返回 true (或者设置为 null 或 undefined)，promise 将被 resolve; 否则，promise 将被 rejectet

  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认的
  },

maxRedirects

定义在 node.js 中 follow 的最大重定向数目，如果设置为0，将不会 follow 任何重定向

maxRedirects: 5, // 默认的

httpAgent和httpsAgent

httpAgent 和 httpsAgent 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理

  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

cancelToken

指定用于取消请求的 cancel token

 cancelToken: new CancelToken(function (cancel) {
  })

proxy

定义代理服务器的主机名称和端口

这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 
设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: "127.0.0.1",
    port: 9000,
    // auth 表示 HTTP 基础验证应当用于连接代理，并提供凭据
    auth: : {
      username: "mikeymike",
      password: "rapunz3l"
    }
  }

3.2 并发执行

处理并发请求的助手函数

axios.all(iterable)

axios.spread(callback)

3.3 创建实例

自定义配置 axios.create([config])

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

3.4 响应结构response

响应返回的信息

{
  // `data` 由服务器提供的实际的响应数据
  data: {},

  // `status`  HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: "OK",

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}


使用 then 时，会接收下面这样的响应
axios
  .get("/user/12345")
  .then(function(response) {
       console.log(response.data);
       console.log(response.status);
       console.log(response.statusText);
       console.log(response.headers);
       console.log(response.config);
});

3.5 默认配置

可以指定将被用在各个请求的配置默认值

全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定义实例默认值

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

3.6 拦截器

在请求或响应被 then 或 catch 处理前拦截它们

// 添加   请求  拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加  响应  拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果你想在稍后移除拦截器，可以这样 ：axios.interceptors.request.eject（name）

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});

// 移除拦截器 
axios.interceptors.request.eject(myInterceptor);