关于Axios请求方式

一.是什么？

在Vue和React等大型项目中，我们常用的数据请求方式，就是Axios。
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

二、使用步骤：

1.安装

yarn add axios

2.使用格式

统一的格式

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

// 直白一点表示：

axios
  .get(url, {
    params: {}
  })
  .then(res=>{})
  .catch(err=>{})

axios
  .post('/user', {})
  .then(res=>{})
  .catch(err=>{})

三、实际的使用演示：

1、开启后端服务

查看接口文档

image.png

2、组件中引入并发起请求：

引入

import axios from "axios"

发送get请求：

// get请求
axios.get("http://localhost:3000/getdata").then(res => {
  console.log(res);
});

发送post请求：

axios.post("http://localhost:3000/postdata", {
    data: {num:123}
  })
  .then(res => {
    console.log(res);
  });

此时可能会遇到一个问题
显然：因为服务器浏览器url的端口一致产生了跨域问题

image.png

3.解决跨域

发现跨域，解决方案是找到 vue.config.js 文件，没有就在根目录新建一个

设置代理服务器

module.exports = {
    devServer: {
        proxy: "http://localhost:3000"
    }
}

然后请求改写：

// get请求
axios.get("/getdata").then(res => {
  console.log(res);
});

// 上面的请求也可以这样做【以后我们都选用这种模式，方便后期做配置】
axios.post("/postdata", {
    data: {num:123}
  })
  .then(res => {
    console.log(res);
  });

成功拿到数据

image.png