axios的使用

垦利不2024-08-18 10:06

Axios的官网

一、axios的使用

Axios 的主要作用

  • 从浏览器中创建XMLHttpRequests。
  • 从node.js创建http请求。
  • 支持Promise API。
  • 拦截请求和响应。
  • 转换请求数据和响应数据。
  • 取消请求。
  • 自动转换JSON数据。
  • 客户端支持防御XSRF。

Axios 的运行环境

  1. 浏览器环境

发送AJAX请求

  1. Node.js环境

发送HTTP请求

Axios 的使用方法

安装 Axios（如果你是在 Node.js 环境中工作）:
npm install axios
javascript 复制代码 
yarn add axios
javascript 复制代码 
bower install axios

或在你的项目中（如果是通过 CDN 引入）:

javascript 复制代码 
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
发送 GET 请求:

获取数据

javascript 复制代码 
axios.get('/user?ID=12345')  
  .then(function (response) {  
    // 处理成功情况  
    console.log(response);  
  })  
  .catch(function (error) {  
    // 处理错误情况  
    console.log(error);  
  })  
  .then(function () {  
    // 总是会执行  
  });

方法2

javascript 复制代码 
   getBtn.onclick=function(){
            axios({
                method:"GET",
                url:"http://localhost:3000/posts",
                data:{
                    title:"axios get",
                    content:"axios get content"
                }
            }).then(response=>{
                console.log(response);
            });
        }

方法3

发送 POST 请求:

向指定资源提交数据

javascript 复制代码 
 
    postBtn.onclick=function(){
        axios.post(
            "http://localhost:3000/posts",
            {
                title:"axios post",
                content:"axios post content"
            }
            
        ).then(response=>{    
            console.log(response);
        }) .catch(function (error) {  
    console.log(error);  
  });
    }

方法2

javascript 复制代码 
     postBtn.onclick=function(){
        axios({
            method:"POST",
            url:"http://localhost:3000/posts",
            data:{
                title:"axios get",
                content:"axios get content"
            }
        
        }).then(response=>{
            console.log(response); 
     });
    }
delete请求

删除数据

javascript 复制代码 
  //delete请求
    deleteBtn.onclick=function(){
        axios({
            method:"DELETE",
            url:"http://localhost:3000/posts/1",
            params:{
              id:1
            },//以明文方式提交参数，不安全
            data:{
                id:1
            }//以安全方式提交参数，推荐使用
        }).then(response=>{
            console.log(response);
        });
    }
put请求

更新数据

javascript 复制代码 
 //put请求
        putBtn.onclick=function(){
            axios({
                method:"PUT",
                url:"http://localhost:3000/posts/2",
                data:{
                    title:"axios put",
                    content:"axios put content"
                }
            }).then(response=>{
                console.log(response);
            });
        }
patch请求

axios 本身并不直接支持 patch 请求

在Vuex store 的 actions 中，你可以这样定义一个发送 PATCH 请求的 action

javascript 复制代码 
// 引入 axios  
import axios from 'axios';  
  
export default new Vuex.Store({  
  // ...  
  actions: {  
    // 假设我们有一个用于更新用户信息的 action  
    updateUserInfo({ commit }, userInfo) {  
      // 使用 axios 发送 PATCH 请求  
      axios.patch('/api/users/' + userInfo.id, {  
        // 这里是你想要更新的字段  
        name: userInfo.name,  
        email: userInfo.email  
        // ... 其他字段  
      })  
      .then(response => {  
        // 请求成功后的处理  
        console.log(response.data);  
        // 可能需要更新 Vuex store 中的状态  
        commit('updateUser', response.data);  
      })  
      .catch(error => {  
        // 处理请求错误  
        console.error('There was an error!', error);  
      });  
    }  
  },  
  mutations: {  
    // 定义一个 mutation 来更新用户状态  
    updateUser(state, user) {  
      // 更新状态  
      state.user = user;  
    }  
  },  
  // ...  
});
配置请求:

你可以创建一个 Axios 实例，并在该实例上配置全局设置，如基础 URL、超时时间等。

javascript 复制代码 
const instance = axios.create({  
  baseURL: 'https://some-domain.com/api/',  
  timeout: 1000,  
  headers: {'X-Custom-Header': 'foobar'}  
});  
 
instance.get('/get')  
  .then(function (response) {  
    console.log(response.data);  
  })  
  .catch(function (error) {  
    console.log(error);  
  });
请求和响应拦截器:
javascript 复制代码 
// 添加请求拦截器  
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请求响应结果结构
javascript 复制代码 
{  
  // 服务器响应的数据  
  data: {},  
  
  // 服务器响应的 HTTP 状态码  
  status: 200,  
  
  // 服务器响应的 HTTP 状态信息  
  statusText: 'OK',  
  
  // 服务器响应的 HTTP 头部  
  headers: {  
    'content-type': 'application/json',  
    // 其他头部信息...  
  },  
  
  // axios 请求的配置信息  
  config: {  
    url: 'https://api.example.com/data',  
    method: 'get',  
    // 其他配置信息，如 headers, params, timeout 等...  
  },  
  
  // 请求的 XMLHttpRequest 对象实例（仅浏览器环境）  
  // 或 http.ClientRequest 对象实例（Node.js 环境）  
  request: {}  
}

  • data: 这是从服务器接收到的实际数据。它的格式取决于服务器返回的内容类型（Content-Type），通常是 JSON、XML、文本等。

  • status: 这是一个整数，表示服务器响应的 HTTP 状态码。常见的状态码包括 200（OK）、404（Not Found）、500（Internal Server Error）等。

  • statusText : 这是一个字符串，表示服务器响应的 HTTP 状态信息，如 "OK"、"Not Found" 等。虽然 statusText 在某些情况下可能很有用，但通常更关注 status 代码。

  • headers : 这是一个对象，包含了服务器响应的所有 HTTP 头部。可以通过访问这个对象的属性来获取特定的头部信息，如 response.headers['content-type']。

  • config: 这是一个对象，包含了 Axios 请求的配置信息。这包括请求的 URL、方法（如 GET、POST）、请求头（headers）、请求体（data/params）等。这个对象在调试或需要了解请求详情时非常有用。

  • request : 这是一个对象，代表了底层的 HTTP 请求实例。在浏览器环境是 XMLHttpRequest 对象的实例；在 Node.js 环境中，它是 http.ClientRequest 对象的实例。这个对象提供了对底层 HTTP 请求的访问，但通常不需要直接与它交互，除非你需要执行一些低级的网络操作。

二、json-server的服务搭建

json-server的服务搭建过程相对简单，主要包括以下几个步骤：

安装json-server：

确保已经安装了Node.js环境

使用npm全局安装json-server。命令如下：

npm install -g json-server

或者（或cnpm，如果有淘宝镜像的话）：

cnpm install -g json-server

创建项目和db.json文件：

创建一个新的文件夹作为json-server的项目文件夹。

在该文件夹下，创建一个名为db.json的文件，并在其中添加json数据。这些数据将作为API的数据源。

{  
  "posts": [  
    { "id": 1, "title": "json测试", "body": "json测试", "author": "苏苏" },  
    { "id": 2, "title": "json测试", "body": "json测试", "author": "小翎儿" }  
  ],  
  "comments": [  
    { "id": 1, "name": "测试json", "email": "test@test.com", "body": "测试json" },  
    { "id": 2, "name": "测试json", "email": "test@test.com", "body": "测试json" }  
  ],  
  "profile": { "name": "测试json" }  
}

运行json-server：

打开命令行工具，切换到json-server的项目文件夹下。

执行以下命令来启动json-server服务，并指定db.json文件作为数据源：

json-server --watch db.json

该命令会启动一个Express服务器，并监听默认端口3000（除非通过--port参数指定其他端口）。

--watch参数表示json-server将监视db.json文件的更改，并在文件更改时自动重新加载数据。

访问API：

启动服务后，可以使用浏览器或Postman等工具访问json-server提供的API。例如，访问http://localhost:3000/posts将返回db.json文件中posts数组的所有数据。

相关推荐
燃先生._.3 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
高山我梦口香糖4 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
black^sugar5 小时前
纯前端实现更新检测
开发语言·前端·javascript
理想不理想v6 小时前
webpack最基础的配置
前端·webpack·node.js
2401_857600957 小时前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_857600957 小时前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL7 小时前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
小白学大数据7 小时前
如何使用Selenium处理JavaScript动态加载的内容？
大数据·javascript·爬虫·selenium·测试工具
轻口味7 小时前
Vue.js 核心概念：模板、指令、数据绑定
vue.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程