1.json-server

​ JSON Server 是一个快速、零配置的基于 Node.js 的 Fake REST API 服务器，用于快速原型开发和前端开发中的数据模拟。 JSON Server 的核心功能是提供基于 RESTful API 的数据访问接口，它支持常用的 HTTP 方法，如 GET、POST、PUT、DELETE 等，可以方便地进行数据的增删改查操作。JSON Server 还支持一些高级的查询参数，如排序、过滤、分页等，可以满足大部分前端开发的数据需求。此外，JSON Server 还提供了路由和中间件的支持，可以自定义 API 的行为。

官方文档https://github.com/typicode/json-server

1.1使用

  • 安装：npm install -g json-server

  • 创建一个db.json文件：

  • 启动服务：npx json-server --watch db.json

1.2通过以下API访问数据

  • GET /users：获取所有用户信息
  • GET /users/1：获取 ID 为 1 的用户信息
  • POST /users：创建一个新用户
  • PUT /users/1：更新 ID 为 1 的用户信息
  • DELETE /users/1：删除 ID 为 1 的用户信息

2.axios的理解和使用

2.1axios的特性

  • 基于 Promise：Axios 是基于 Promise 的 HTTP 客户端，可以方便地处理异步请求。
  • 支持浏览器和 Node.js：Axios 可以在浏览器和 Node.js 环境中使用，可以轻松地实现前后端一致的数据请求方式。
  • 支持各种请求方法：Axios 支持常见的请求方法，包括 GET、POST、PUT、DELETE、HEAD、OPTIONS 等。
  • 支持请求和响应的拦截器：Axios 支持请求和响应的拦截器，可以在请求和响应被发送或接收前对它们进行拦截和处理，例如设置请求头信息、统一处理错误等。
  • 支持请求的取消：Axios 提供了请求的取消功能，可以在请求未完成时取消请求，防止请求过程中出现意外情况。
  • 支持自动转换 JSON 数据：Axios 默认会自动将响应的 JSON 数据转换为 JavaScript 对象，请求时也可以自动将请求数据转换为 JSON 格式。
  • 支持异步请求的并发：Axios 可以同时发起多个请求，可以使用 axios.all 和 axios.spread 方法来处理多个请求的返回结果。
  • 提供了丰富的配置选项：Axios 提供了丰富的配置选项，可以根据实际需求进行配置，例如设置超时时间、设置请求头信息等。

官方文档：https://github.com/axios/axios

2.2axios基本使用

  1. 安装包管理器：npm install axios

    一般项目中使用npm或者yarn，学习阶段使用cdn方式安装依赖

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

  2. 导入Axios库：在需要使用axios的文件中引入axios库

    import axios from 'axios'

  3. 发送 HTTP 请求：使用 Axios 提供的方法发送 HTTP 请求，例如发送一个 GET 请求

    axios.get('/api/posts')
  .then(function (response) {
    console.log(response.data)
  })
  .catch(function (error) {
    console.log(error)
  })

  4. 处理响应数据：在请求成功后，使用 then 方法处理响应数据；在请求失败后，使用 catch 方法处理错误信息。

    axios.post('/api/posts', 
  {
    title: 'Hello, Axios',
    content: 'This is a test post created by Axios.'
  }).then(function (response) {
     console.log(response.data)
  }).catch(function (error) {
     console.log(error)
  })

2.3axios常用语法

  1. axios.get(url[, config]): 发送 GET 请求：

    axios.get('/api/posts')
  .then(function (response) {
    console.log(response.data)
  })
  .catch(function (error) {
    console.log(error)
  })

  2. axios.post(url[, data, config]): 发送 POST 请求：

    axios.post('/api/posts',
  {
    title: 'Hello, Axios',
    content: 'This is a test post created by Axios.'
  })
  .then(function (response) {
    console.log(response.data)
  })
  .catch(function (error) {
    console.log(error)
  })

  3. axios.put(url[, data, config]): 发送 PUT 请求：

    axios.put('/api/posts/1', 
  {
    title: 'Hello, Axios',
    content: 'This is an updated post created by Axios.'
  })
  .then(function (response) {
    console.log(response.data)
  })
  .catch(function (error) {
    console.log(error)
  })

  4. axios.delete(url[, config]): 发送 DELETE 请求：

    axios.delete('/api/posts/1')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error)
  })

  5. axios(config): 通用/最本质的发任意类型请求的方式

    ​ Axios 提供了一个 axios(config) 方法，可以通过配置的方式来发送任意类型的 HTTP 请求，包括 GET、POST、PUT、DELETE 等。该方法是 Axios 最本质、最通用的发请求的方式。使用 axios(config) 方法发送请求，需要在配置对象中设置请求的 URL、请求方法、请求参数、请求头信息等。例如，发送一个 POST 请求：

    axios({
  method: 'post',
  url: '/api/posts',
  data: {
    title: 'Hello, Axios',
    content: 'This is a test post created by Axios.'
  },
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(function (response) {
  console.log(response.data)
})
.catch(function (error) {
  console.log(error)
})

  6. axios.request(config):

    axios.request(config) 方法实际上是对 axios(config) 方法的一种封装，它将 HTTP 请求方法作为一个配置选项来处理，可以通过 method 属性来指定请求方法。例如，发送一个 DELETE 请求：

    axios.request({
  method: 'delete',
  url: '/api/posts/1'
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
});

2.4axios请求的默认全局配置

//baseURL：设置请求的基础 URL，可以在发送请求时省略 URL 的前缀部分。
axios.defaults.baseURL = 'https://api.example.com'

//timeout：设置请求的超时时间，超过该时间请求将会被取消
axios.defaults.timeout = 5000

//headers：设置请求的头信息，可以设置自定义的请求头信息
axios.defaults.headers.common['Authorization'] = 'Bearer ' + getToken()

//paramsSerializer：设置参数序列化函数，可以在发送请求时对 URL 参数进行序列化操作。
axios.defaults.paramsSerializer = function (params) {
  return qs.stringify(params, {arrayFormat: 'brackets'})
}

//withCredentials：设置是否携带跨域请求的凭证，可以是一个布尔值或一个 CookieJar 实例。
axios.defaults.withCredentials = true

2.5axios创建实例对象

Axios 提供了 axios.create() 方法，用于创建一个新的 Axios 实例对象。通过创建实例对象，可以为不同的请求配置不同的参数，例如不同的基础 URL、不同的请求头信息等。

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
})
axiosInstance.get('/posts')
  .then(function (response) {
    console.log(response.data)
  })
  .catch(function (error) {
    console.log(error)
  })

3.axios-拦截器

Axios 的拦截器允许我们在发送请求或接收响应之前对它们进行拦截和处理，对于一些公用的业务逻辑，如请求头设置、请求参数处理、错误处理等，可以通过拦截器来实现。

Axios 提供了两种类型的拦截器：请求拦截器和响应拦截器。请求拦截器可以对请求进行拦截和处理，而响应拦截器可以对响应进行拦截和处理。

axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器

// 创建一个 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com'
})

// 添加请求拦截器
axiosInstance.interceptors.request.use(function (config) {
  // 在发送请求之前对请求进行处理
  // 添加请求头信息
  config.headers.Authorization = 'Bearer ' + getToken()
  return config
}, function (error) {
  // 对请求错误进行处理
  return Promise.reject(error)
})

// 添加响应拦截器
axiosInstance.interceptors.response.use(function (response) {
  // 对响应数据进行处理
  return response
}, function (error) {
  // 对响应错误进行处理
  if (error.response.status === 401) {
    // 身份验证失败，跳转到登录页面
    window.location.href = '/login'
  }
  return Promise.reject(error)
})

// 发送请求
axiosInstance.get('/posts')
  .then(function (response) {
    console.log(response.data)
  })
  .catch(function (error) {
    console.log(error)
  })

需要注意的是，在添加拦截器时，需要调用 use 方法，并传入两个回调函数，第一个回调函数用于对请求或响应进处理，第二个回调函数用于对错误进行处理。在回调函数中，可以对请求或响应进行处理，并返回处理后的结果。如果需要终止请求或响应，可以返回一个 Promise，并将错误作为参数传递给 reject 函数。

通过使用拦截器，可以在发送请求或接收响应之前对它们进行拦截和处理，实现一些公用的业务逻辑，提高代码的可重用性和维护性。同时，也可以在特定情况下对请求或响应进行特定的处理，提高代码的灵活性和可扩展性。

4.拦截器、ajax请求、请求的回调执行顺序

以下是一个添加了多个请求拦截器和响应拦截器的示例：

axios.interceptors.request.use(function (config) {
  console.log('请求拦截器1')
  return config
}, function (error) {
  return Promise.reject(error)
})

axios.interceptors.request.use(function (config) {
  console.log('请求拦截器2')
  return config
}, function (error) {
  return Promise.reject(error)
})

axios.interceptors.response.use(function (response) {
  console.log('响应拦截器1')
  return response
}, function (error) {
  return Promise.reject(error)
})

axios.interceptors.response.use(function (response) {
  console.log('响应拦截器2')
  return response;
}, function (error) {
  return Promise.reject(error)
})

axios.get('/api/data')

控制台输出：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-koxx2EQO-1683646800694)(C:\Users\luohai\OneDrive\桌面\axios\控制台输出.png)]

执行顺序：

流程：请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响应拦截器 2 => 请求的回调

此流程是通过 promise 串连起来的, 请求拦截器传递的是 config, 响应拦截器传递的是 response

另外请求拦截器就像是栈，后进先出，响应拦截器就像是队列，先进先出

5.axios取消请求

5.1CancelToken

在 Axios 中，取消请求可以使用 CancelToken 和 cancel 函数实现。当需要取消一个请求时，可以调用 cancel 函数，并将一个 Cancel 对象作为参数传递给它，该 Cancel 对象包含一个 message 属性，用于指定取消请求的原因。需要注意的是，只有当请求还没有完成时才能取消请求。

// 创建 CancelToken 对象和 cancel 函数
const source = axios.CancelToken.source()

// 发送请求，并将 CancelToken 对象作为参数传递给请求配置
axios.get('/api/data', {
  cancelToken: source.token
}).then(response => {
  console.log(response.data);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    console.log('Request failed', error.message);
  }
})

// 取消请求
source.cancel('Operation canceled by the user.')

在上面的代码中，首先通过 axios.CancelToken.source() 方法创建了一个 CancelToken 对象和一个 cancel 函数，然后在发送请求时将该 CancelToken 对象作为参数传递给请求配置。如果请求还没有完成，可以调用 cancel 函数取消请求，并指定取消请求的原因。

在 catch 块中，通过 axios.isCancel 方法判断错误是否是由取消请求引起的，并在控制台输出相关信息。

另外，如果需要取消多个请求，可以通过创建多个 CancelToken 对象和 cancel 函数实现。每个 CancelToken 对象都是独立的，它们之间不会相互干扰。

5.2AbortController

除了 CancelToken 之外，还有一些其他的方法可以用于取消请求，例如采用 AbortController API 进行请求的取消。AbortController API 是一个标准的 Web API，可以在现代浏览器和 Node.js 等环境中使用，它提供了一个 AbortController 对象和一个 abort() 方法，用于取消正在进行的请求。

以下是一个使用 AbortController 进行请求取消的示例：

const controller = new AbortController()
const signal = controller.signal

axios.get('/api/data', { signal })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request canceled')
    } else {
      console.log('Request failed', error.message);
    }
  })

// 取消请求
controller.abort()

在上面的代码中，首先创建了一个 AbortController 对象和一个 signal 对象，并将 signal 对象作为参数传递给请求配置。当需要取消请求时，可以调用 abort() 方法取消请求，并在 catch 块中判断错误类型是否为 AbortError，以确定请求是否被取消。

需要注意的是，AbortController API 只能在支持该 API 的浏览器和环境中使用，如果需要支持更多的环境和浏览器，建议使用 CancelToken 进行请求的取消。

补充：

  • axios.Cancel()：用于创建取消请求的 Error 对象。当请求被取消时，会抛出一个类型为 Cancel 的错误对象。

  • axios.CancelToken：用于创建取消请求的 token 对象。可以通过 axios.CancelToken.source() 方法创建一个 CancelToken 对象和一个 cancel 函数，当需要取消请求时，可以调用 cancel 函数。

  • axios.isCancel()：用于判断一个错误是否是由取消请求引起的。当错误类型为 Cancel 时，返回 true，否则返回 false。

  • axios.all(promises)：用于批量执行多个异步请求，并在所有请求都完成时返回一个包含所有响应数据的数组。promises 参数是一个包含多个 Axios 请求的数组。

  • axios.spread()：用来指定接收所有成功数据的回调函数的方法。当我们需要同时处理多个请求的响应数据时，可以使用 axios.all() 方法，然后使用 axios.spread() 方法将所有响应数据传递给回调函数。

lToken.source()` 方法创建一个 CancelToken 对象和一个 cancel 函数，当需要取消请求时，可以调用 cancel 函数。

  • axios.isCancel()：用于判断一个错误是否是由取消请求引起的。当错误类型为 Cancel 时，返回 true，否则返回 false。
  • axios.all(promises)：用于批量执行多个异步请求，并在所有请求都完成时返回一个包含所有响应数据的数组。promises 参数是一个包含多个 Axios 请求的数组。
  • axios.spread()：用来指定接收所有成功数据的回调函数的方法。当我们需要同时处理多个请求的响应数据时，可以使用 axios.all() 方法，然后使用 axios.spread() 方法将所有响应数据传递给回调函数。
# 前端 # ajax
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟