axios的利用

Axios的官网

一、axios的利用

Axios 的主要作用

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

Axios 的运行环境

1. 浏览器环境
发送AJAX请求
2. Node.js环境
发送HTTP请求
Axios 的利用方法

安装 Axios（如果你是在 Node.js 环境中工作）:

1. npm install axios

复制代码

1. yarn add axios

复制代码

1. bower install axios

复制代码

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

1. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

复制代码

发送 GET 请求:

获取数据

1. axios.get('/user?ID=12345')  
2.   .then(function (response) {  
3.     // 处理成功情况  
4.     console.log(response);  
5.   })  
6.   .catch(function (error) {  
7.     // 处理错误情况  
8.     console.log(error);  
9.   })  
10.   .then(function () {  
11.     // 总是会执行  
12.   });

复制代码

方法2 

1.    getBtn.onclick=function(){
2.             axios({
3.                 method:"GET",
4.                 url:"http://localhost:3000/posts",
5.                 data:{
6.                     title:"axios get",
7.                     content:"axios get content"
8.                 }
9.             }).then(response=>{
10.                 console.log(response);
11.             });
12.         }

复制代码

 方法3
发送 POST 请求:

向指定资源提交数据

2.  
3.     postBtn.onclick=function(){
4.         axios.post(
5.             "http://localhost:3000/posts",
6.             {
7.                 title:"axios post",
8.                 content:"axios post content"
9.             }
10.             
11.         ).then(response=>{   
12.             console.log(response);
13.         }) .catch(function (error) {  
14.     console.log(error);  
15.   });
16.     }

复制代码

方法2

1.      postBtn.onclick=function(){
2.         axios({
3.             method:"POST",
4.             url:"http://localhost:3000/posts",
5.             data:{
6.                 title:"axios get",
7.                 content:"axios get content"
8.             }
9.         
10.         }).then(response=>{
11.             console.log(response);
12.      });
13.     }

复制代码

delete请求

删除数据

1.   //delete请求
2.     deleteBtn.onclick=function(){
3.         axios({
4.             method:"DELETE",
5.             url:"http://localhost:3000/posts/1",
6.             params:{
7.               id:1
8.             },//以明文方式提交参数，不安全
9.             data:{
10.                 id:1
11.             }//以安全方式提交参数，推荐使用
12.         }).then(response=>{
13.             console.log(response);
14.         });
15.     }

复制代码

 put请求

更新数据

1. //put请求
2.         putBtn.onclick=function(){
3.             axios({
4.                 method:"PUT",
5.                 url:"http://localhost:3000/posts/2",
6.                 data:{
7.                     title:"axios put",
8.                     content:"axios put content"
9.                 }
10.             }).then(response=>{
11.                 console.log(response);
12.             });
13.         }

复制代码

 patch请求

axios 本身并不直接支持 patch 请求
在Vuex store 的 actions 中，你可以如许定义一个发送 PATCH 请求的 action

1. // 引入 axios  
2. import axios from 'axios';  
3.   
4. export default new Vuex.Store({  
5.   // ...  
6.   actions: {  
7.     // 假设我们有一个用于更新用户信息的 action  
8.     updateUserInfo({ commit }, userInfo) {  
9.       // 使用 axios 发送 PATCH 请求  
10.       axios.patch('/api/users/' + userInfo.id, {  
11.         // 这里是你想要更新的字段  
12.         name: userInfo.name,  
13.         email: userInfo.email  
14.         // ... 其他字段  
15.       })  
16.       .then(response => {  
17.         // 请求成功后的处理  
18.         console.log(response.data);  
19.         // 可能需要更新 Vuex store 中的状态  
20.         commit('updateUser', response.data);  
21.       })  
22.       .catch(error => {  
23.         // 处理请求错误  
24.         console.error('There was an error!', error);  
25.       });  
26.     }  
27.   },  
28.   mutations: {  
29.     // 定义一个 mutation 来更新用户状态  
30.     updateUser(state, user) {  
31.       // 更新状态  
32.       state.user = user;  
33.     }  
34.   },  
35.   // ...  
36. });

复制代码

 设置请求:

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

1. const instance = axios.create({  
2.   baseURL: 'https://some-domain.com/api/',  
3.   timeout: 1000,  
4.   headers: {'X-Custom-Header': 'foobar'}  
5. });  
6.  
7. instance.get('/get')  
8.   .then(function (response) {  
9.     console.log(response.data);  
10.   })  
11.   .catch(function (error) {  
12.     console.log(error);  
13.   });

复制代码

请求和响应拦截器:

1. // 添加请求拦截器  
2. axios.interceptors.request.use(function (config) {  
3.   // 在发送请求之前做些什么  
4.   return config;  
5. }, function (error) {  
6.   // 对请求错误做些什么  
7.   return Promise.reject(error);  
8. });  
9.  
10. // 添加响应拦截器  
11. axios.interceptors.response.use(function (response) {  
12.   // 对响应数据做点什么  
13.   return response;  
14. }, function (error) {  
15.   // 对响应错误做点什么  
16.   return Promise.reject(error);  
17. });

复制代码

你可以添加请求和响应拦截器来在请求发送前或响应被处理前执行代码。
axios请求响应结果结构

1. {  
2.   // 服务器响应的数据  
3.   data: {},  
4.   
5.   // 服务器响应的 HTTP 状态码  
6.   status: 200,  
7.   
8.   // 服务器响应的 HTTP 状态信息  
9.   statusText: 'OK',  
10.   
11.   // 服务器响应的 HTTP 头部  
12.   headers: {  
13.     'content-type': 'application/json',  
14.     // 其他头部信息...  
15.   },  
16.   
17.   // axios 请求的配置信息  
18.   config: {  
19.     url: 'https://api.example.com/data',  
20.     method: 'get',  
21.     // 其他配置信息，如 headers, params, timeout 等...  
22.   },  
23.   
24.   // 请求的 XMLHttpRequest 对象实例（仅浏览器环境）  
25.   // 或 http.ClientRequest 对象实例（Node.js 环境）  
26.   request: {}  
27. }

复制代码

• 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。下令如下：

1. npm install -g json-server

复制代码

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

1. cnpm install -g json-server

复制代码

• 创建项目和db.json文件：
  

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

1. {  
2.   "posts": [  
3.     { "id": 1, "title": "json测试", "body": "json测试", "author": "苏苏" },  
4.     { "id": 2, "title": "json测试", "body": "json测试", "author": "小翎儿" }  
5.   ],  
6.   "comments": [  
7.     { "id": 1, "name": "测试json", "email": "test@test.com", "body": "测试json" },  
8.     { "id": 2, "name": "测试json", "email": "test@test.com", "body": "测试json" }  
9.   ],  
10.   "profile": { "name": "测试json" }  
11. }

复制代码

• 运行json-server：
  

打开下令行工具，切换到json-server的项目文件夹下。
执行以下下令来启动json-server服务，并指定db.json文件作为数据源：

1. 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数组的所有数据。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。