前端——Axios使用（一）

Axios的介绍

Axios的使用

步骤一：创建vue项目

步骤二：安装axios

步骤二：演示Axios的各种请求方法（基本用法）

步骤三：演示Axios的实例与拦截器（进阶用法）

步骤四：Axios的封装

关键词：axios、发送请求和接收数据、拦截器、封装

Axios的介绍

axios不是一种新技术，本质上也是对原生XHR（XMLHttpReques）的封装，只不过它是基于Promise的，是Promise的实现版本，符合最新的ES规范。

Axios的使用

步骤一：创建vue项目

在命令提示符中输入vue ui打开图形化创建vue项目网站，在里面创建项目安装即可，用编译器打开。

vue ui

下面是新建项目的目录结构：

项目创建完成后进入下一步安装axios

步骤二：安装axios

快捷键ctrl + `打开终端输入npm install axios

npm install axios

axios安装成功如上图所示，检查Axios是否安装进当前项目，可通过查看当前项目下的node_modules文件夹下面是否有axios，如下图所示

安装完成axios后，清空HelloWorld组件的代码，只留下框架，相应的app.vue也一样。

步骤二：演示Axios的各种请求方法（基本用法）

get：一般用于获取数据

<template>
  <div class="hello">
    <button @click="ceshi()">
      按钮
    </button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'HelloWorld',
  props: {

  },
  methods:{
    ceshi(){
      axios({
        url:'/db.json',
        method:'get',
      }).then(result=>{
        console.log(result)
      }).catch(error=>{
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>

</style>

程序里面的db.json可以自行创建在public下，写一些json数据再来进行测试，主要目的是进行测试，至于为什么在public下写一个json代码，就可以在本地进行获取数据，这个可以大致理解为自己给自己提供数据，相当于后端就是自己的电脑

这只是测试的一个方法，没有后端提供数据确实不好测试，但是还是有方法的，在Mock.js这个工具下就可以进行模拟数据，为前端提供测试场景
另外一种方法就是用其他公司提供的一些json格式的数据，例如https://hmajax.itheima.net/api/area，大家可以像这个网址发送get请求，一样的可以获取数据，再发送之前先进入网站看看json的内容是什么，保证axios.get请求的正确性

  methods:{
    ceshi(){
      axios({
        url:'https://hmajax.itheima.net/api/area',
        method:'get',
      }).then(result=>{
        console.log(result)
      }).catch(error=>{
        console.log(error)
      })
    }
  }

可能是因为里面的数据被他们删了吧，所以就获取到了这个，一样的说明你的axios发送了get请求，并且正确的返回了结果

post：一般用于提交数据（表单提交与文件上传）

post请求常用的数据请求格式有三种：

Content-Type : application/x-www-form-urlencoded。ajax默认的数据格式。请求体中的数据会以json字符串的形式发送到后端。
Content-Type : application/json ; charset=utf-8。axios默认的数据格式。请求体中的数据会以普通表单形式（键值对）发送到后端。
Content-Type : multipart/form-data 。它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

之所以要理解数据请求格式是因为开发人员根据接口文档来进行开发，接口文档说需要哪种数据格式，就应该发送哪种格式，这样利于前后端同时开发

下面是示例程序：与get请求使用params不同的是，post请求使用data属性

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Axios Test',
    body: 'This is a test post',
    userId: 1
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

patch：更新数据（只将修改的数据推送到后端（服务端））

axios.patch('https://jsonplaceholder.typicode.com/posts/1', {
    title: 'Updated Title'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

put：更新数据（所有数据推送到服务端）

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
    title: 'New Title',
    body: 'Updated body content',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

delete：删除数据

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('Deleted successfully');
  })
  .catch(error => {
    console.error(error);
  });

步骤三：演示Axios的实例与拦截器（进阶用法）

使用Axios实例可以为每个请求配置一些默认信息：

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  headers: {
    'Content-Type': 'application/json'
  }
});

apiClient.get('/posts')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

步骤四：Axios的封装

可以封装一个自己的请求模块，方便重复使用：

export const fetchPosts = () => {
  return axios.get('https://jsonplaceholder.typicode.com/posts');
};

fetchPosts()
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

这种方式可以在开发中进一步清晰地组织代码。

平台声明：以上文章转载于《CSDN》，文章全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，仅作参考。

原文链接：https://blog.csdn.net/m0_72105319/article/details/140875499