Vue3.0（八）：网络请求库axios

网络请求库axios

axios官网

• 功能特点
  • 在浏览器中发送 XMLHttpRequests请求
  • 在node.js中发送http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据

axios请求方式

• 支持多种请求方式

  axios(config)

  axios.request(config)

  axios.get(url[, config])

  axios.delete(url[, config])

  axios.head(url[, config])

  axios.options(url[, config])

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

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

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

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

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

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

• 常见的 config配置选项

  • 请求地址（url:‘/user’）
  • 请求类型（method:‘get’）
  • 请求根路径（baseURL:‘http://www.xxx.com’）
  • 请求前的数据处理（transformRequest:[function(data){}]）
  • 请求后的数据处理（transformResponse:[function(data){}]）
  • 自定义的请求头（headers:{‘x-Requested-With’:‘XMLHttpRequest’}）
  • URL查询对象（params:{id:12}）

基本使用

• 通过 npm install axios进行安装

• 在main.js中引入axios

import axios from "axios";

• 使用 axios.request(config)发送网络请求，默认是get方法

axios.request("http://xxxxx").then((res) => {
   
  console.log(res.data);
});

• 使用 axios.get(url[, config])发送网络请求

//第一种写法，把query直接写在url中
axios.get("http://xxxx?id=500665346").then((res) => {
   
    console.log(res.data);
});

//第二种写法，通过config写query