axios的使用 - 技术栈

Axios的官网

一、axios的使用

Axios 的主要作用

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

Axios 的运行环境

浏览器环境

发送AJAX请求

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