Axios教程-DEV365 开发者社区

这是有关如何使用Axios的分步教程，这是一个流行的JavaScript库，用于制作HTTP请求：

步骤1：安装Axios
在使用Axios之前，您需要将其安装在项目中。您可以通过在终端中运行以下命令来通过NPM或纱线安装Axios：

npm install axios

或

yarn add axios

步骤2：导入Axios
在您的JavaScript文件中，导入Axios可以使用其功能：

import axios from 'axios';

步骤3：提出请求
要使用AXIOS提出GET请求，您可以使用axios.get()方法。这是一个例子：

axios.get('https://api.example.com/data')
  .then(response => {
    // Handle the response data
    console.log(response.data);
  })
  .catch(error => {
    // Handle the error
    console.error(error);
  });

在上面的代码中，将'https://api.example.com/data'替换为您要提出请求的实际URL。 axios.get()方法返回承诺，因此您可以使用.then()处理成功的响应，并可以处理任何错误。

步骤4：提出邮政请求
要使用AXIOS提出发布请求，您可以使用axios.post()方法。这是一个例子：

const data = {
  name: 'John',
  email: 'john@example.com'
};

axios.post('https://api.example.com/data', data)
  .then(response => {
    // Handle the response data
    console.log(response.data);
  })
  .catch(error => {
    // Handle the error
    console.error(error);
  });

在上面的代码中，将'https://api.example.com/data'替换为要提出邮政请求的实际URL。 axios.post()方法采用两个参数：您要在请求中发送的URL和数据。同样，您可以使用.then()处理成功的响应并处理任何错误。

步骤5：自定义请求标头
您还可以使用Axios自定义请求标头。要设置标题，您可以将对象作为第三个参数传递给axios.post()或axios.get()方法。这是一个例子：

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer your_token'
};

axios.get('https://api.example.com/data', { headers })
  .then(response => {
    // Handle the response data
    console.log(response.data);
  })
  .catch(error => {
    // Handle the error
    console.error(error);
  });

在上述代码中，headers对象包含要在请求中包含的标题。将'your_token'替换为要发送的实际令牌值。

步骤6：处理并发请求
Axios还支持处理多个并发请求。您可以将axios.all()和axios.spread()方法用于此目的。这是一个例子：

const request1 = axios.get('https://api.example.com/data1');
const request2 = axios.get('https://api.example.com/data2');

axios.all([request1, request2])
  .then(axios.spread((response1, response2) => {
    // Handle the responses
    console.log(response1.data);
    console.log(response2.data);
  }))
  .catch(error => {
    // Handle the error
    console.error(error);
  });

在上面的代码中，axios.all()采用了一系列请求，并返回单个承诺，在成功完成所有请求时可以解决。 axios.spread()方法与.then()一起使用将响应数据传播到每个请求的单独变量中。

步骤7：拦截器
Axios允许您定义拦截器，这些函数是在由.then()或.catch()处理之前为每个请求或响应执行的函数。拦截器对于添加标题，执行请求转换，全球处理错误等有用。

这是使用拦截器将授权标头添加到每个请求的示例：

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer your_token';
  return config;
});

在上面的代码中，axios.interceptors.request.use()方法采用了接收请求配置对象的回调函数。您可以在返回更新的配置对象之前修改标题或执行其他操作。

步骤8：取消请求
Axios提供了使用取消令牌取消请求的能力。当您要取消正在进行的请求或在不满足某些条件时阻止请求的请求时，这可能很有用。

这是使用取消令牌取消请求的示例：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://api.example.com/data', { cancelToken: source.token })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.error(error);
    }
  });

// Cancel the request
source.cancel('Request canceled by the user.');

在上述代码中，使用axios.CancelToken.source()创建了取消令牌。取消令牌将作为请求配置对象中的cancelToken参数传递。要取消请求，请致电source.cancel()并提供可选的取消消息。

这些是开始AXIO并在JavaScript应用程序中提出HTTP请求的基本步骤。 Axios提供了更多功能和选项，例如处理请求和响应拦截器，配置超时，处理进度事件等。您可以参考Axios文档（https://axios-http.com/docs/intro）以获取更多详细信息和示例。
当然！这是您可以与Axios一起使用的一些其他功能和技术：

步骤9：处理错误
Axios提供内置错误处理功能。除了使用.catch()处理错误外，您还可以利用error.response属性在错误时访问响应数据。这是一个例子：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // The request was made, but the server responded with an error status code
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made, but no response was received
      console.log(error.request);
    } else {
      // Something else happened while setting up the request
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

在上面的代码中，如果服务器返回错误状态代码，则error.response包含响应对象。如果未收到响应，则error.request包含XMLHTTPRequest对象。您可以使用这些属性适当处理错误。

步骤10：以不同格式发送数据
默认情况下，Axios将请求数据作为JSON发送。但是，您可以通过配置适当的标头来以其他格式来发送其他格式，例如URL编码或Multipart/form-data。这里有几个例子：

将数据作为URL编码的表单数据发送：

const params = new URLSearchParams();
params.append('name', 'John');
params.append('email', 'john@example.com');

axios.post('https://api.example.com/data', params, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

将数据作为多部分/form-data发送：

const formData = new FormData();
formData.append('file', file);

axios.post('https://api.example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

步骤11：设置请求超时
您可以为您的请求配置超时，以处理服务器花费太长响应的情况。 timeout选项允许您以毫秒为单位设置特定持续时间。这是一个例子：

axios.get('https://api.example.com/data', {
  timeout: 5000 // 5 seconds
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上述代码中，如果请求需要超过5秒即可完成，则Axios将通过超时消息丢弃错误。

这些其他步骤和技术应该可以帮助您在JavaScript应用程序中充分利用Axios。 Axios提供了一个功能强大且易于使用的界面，用于通过各种自定义选项制作HTTP请求。请随时探索Axios文档（https://axios-http.com/docs/intro），以获取针对您特定用例的更详细信息和示例。

这是您可以与Axios一起使用的一些更高级的功能和技术：

步骤12：创建Axios实例
您可以使用自己的配置创建自定义Axios实例，而不是使用全局axios对象。当您具有不同的API端点或需要为特定请求设置默认标头时，这可能很有用。这是一个例子：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Authorization': 'Bearer your_token'
  }
});

instance.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上述代码中，axios.create()使用基本URL和默认标头创建了一个新的Axios实例。这使您可以使用相对URL而不是每次指定完整的URL提出请求。

步骤13：请求和响应的拦截器
Axios允许您定义请求和响应拦截器，这些函数是在发送请求之前或收到响应后执行的功能。拦截器提供了一种有力的方法来修改请求或响应数据，全球处理错误或执行其他处理。这是一个例子：

// Request interceptor
axios.interceptors.request.use(config => {
  // Modify the request config before sending
  console.log('Request Interceptor:', config);
  return config;
}, error => {
  // Handle request errors
  console.error('Request Error Interceptor:', error);
  return Promise.reject(error);
});

// Response interceptor
axios.interceptors.response.use(response => {
  // Modify the response data before resolving
  console.log('Response Interceptor:', response);
  return response;
}, error => {
  // Handle response errors
  console.error('Response Error Interceptor:', error);
  return Promise.reject(error);
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上述代码中，请求拦截器在发送请求之前将执行，并在解决响应之前执行响应拦截器。您可以在拦截器功能中修改请求或响应数据或全球处理错误。

步骤14：使用异步/等待
使用Axios Axios可以与async/await语法一起使用，以使您的代码更可读，并以同步方式处理承诺。这是一个例子：

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

在上述代码中，fetchData函数被声明为异步函数。 await关键字用于等待axios.get()返回的承诺解决或拒绝的承诺。这使您可以以更同步和可读的方式编写异步代码。

这些高级功能和技术应增强您对Axios的理解和使用。尝试不同的配置和选项，以根据您的特定需求来量身定制Axios。与往常一样，请参阅Axios文档（https://axios-http.com/docs/intro）以获取更多详细信息和示例。

关于作者。 Geoffrey Callaghan是Fabform.io的程序员，在form backend团队中工作。