掌握鸿蒙网络请求：Axios网络请求库快速入门

简介

在本文中，将向你介绍Axios（@ohos/axios）第三方库的相关的知识，Axios第三方库是一个可用于鸿蒙项目的网络请求库，基于axios进行适配。使用Axios第三方库能够方便快捷地进行接口数据的请求。

什么是axios

axios是一个基于Promise的HTTP库，可以用在浏览器和Node.js中，并且axios已经将许多特性都封装好了，可以自动转换JSON数据、能够拦截请求和响应等，是现在Vue项目开发首选的一个库。

Axios网络请求库的使用

Axios（@ohos/axios）第三方库是基于axios库进行适配，使其可以运行在OpenHarmony中的一个发送网络请求库，并且本库沿用axios库现有用法和特性，使其更加适合于鸿蒙项目的开发。

1.安装

首先，需要安装Axios（@ohos/axios）库，可以通过ohpm的方式来安装，安装指令如下：

bash 复制代码

ohpm install @ohos/axios

我们可以在项目工程中，打开命令行终端执行以上的安装指令。如下图所示。

安装成功之后在oh-package.json5配置文件中找到Axios的配置信息和对应的版本号。如下图所示。

在oh_modules目录下也会安装这个第三方的库。如下图所示。

现在，我们就成功将Axios（@ohos/axios）第三方库安装到项目中。

2.使用案例

要请求网络数据，首先需要申请权限 ，你需要在module.json5文件中申请网络访问权限。如下图所示。

接下来，我们将发送一个简单的Get请求。请求接口如下：

bash 复制代码

http://localhost:8899/goods/byrandom

我们准备一个Get请求的接口，通过这个接口来请求数据。如下图所示。

首先，在项目中引入axios：

javascript 复制代码

import axios from '@ohos/axios'

在界面中创建一个Button按钮，给它增加一个点击事件，当点击该按钮时获取Get请求的数据。代码如下：

typescript 复制代码

export interface GoodsModel{
  flag: boolean
  data: GoodsInfo
}
interface GoodsInfo {
  id: number
  name: string
  price: string
  content: string
  img: string
  type: string
  originalPrice: string
}

@State goods: GoodsModel = null

getGoods(){
axios.get<null,AxiosResponse<GoodsModel>,null>('http://localhost:8899/goods/byrandom')
.then((res: AxiosResponse<GoodsModel>)=>{
    this.goods = res.data
})
.catch((error)=>{
    console.info(JSON.stringify(error))
})
}

Button('发送请求').width('50%').height(40).onClick(()=>{
    this.getGoods()
})

以上代码给Button按钮的单击事件绑定getGoods()方法，在方法中通过axios.get(url)的方式传入获取商品数据对应的API接口地址，通过then()方法获取结果并打印，如下图所示。

可以看见控制台上打印出来了商品的信息。将请求到的数据渲染到页面上，代码如下：

scss 复制代码

@Builder GoodsView(){
Column(){
    Image(this.goods.data.img).width(200)
    Text(this.goods.data.name).fontWeight(FontWeight.Medium)
    Text(this.goods.data.content).margin(10).fontSize(12)
    Text('￥'+this.goods.data.price).fontColor(Color.Green)
}.width(300).height(300)
}

渲染结果如下图所示。

通过示例代码可以看到，使用Axios(@ohos/axios)库进行数据的请求非常简单。我们使用axios.get()方法就可以发送Get请求，当然也可以使用axios.post()方法发送Post请求。

Axios网络请求库API的使用说明

1.通过配置创建请求

Axios库中为所有支持的请求方法提供了别名。在上文中，我们编写的请求示例中使用的就是请求方法的别名方式。我们也可以通过自己的配置来创建请求。语法形式如下：

scss 复制代码

axios(config)
axios(url,config)

我们可以完全通过自己的配置来进行数据请求，例如，我们可以将上文中的Get请求，使用如下的代码替换。

javascript 复制代码

getGoods(){
  axios<null,AxiosResponse<GoodsModel>,null>({
    method: 'get',
    url: "http://localhost:8899/goods/byrandom"
  }).then((res: AxiosResponse<GoodsModel>)=>{
    this.goods = res.data
  }).catch((error)=>{
    console.info(JSON.stringify(error))
  })
}

通过这种配置方式进行的数据请求效果与使用别名方式是一样的。创建请求的配置选项如下所示：

例如，我们可以使用baseURL统一接口请求的前缀，使用timeout指定超时时间，使用params指定查询参数。代码如下：

javascript 复制代码

getGoods(){
  axios<null,AxiosResponse<GoodsModel>,null>({
     method: 'get',
     baseURL:'http://localhost:8899',
     timeout: 5000,
     url: "/goods/query",
     params: {
       id: '8'
     }
   }).then((res: AxiosResponse<GoodsModel>)=>{
      this.goods = res.data
   }).catch((error)=>{
      console.info(JSON.stringify(error))
   })
}

如上代码所示，我们通过向axios方法中传递相关配置来创建请求，这样我们可以根据自己的业务需求配置请求的选项。

2.通过别名方式来创建请求

在Axios库中为方便起见，为所有支持的请求方法提供了别名。可以直接通过别名的请求方法来请求接口数据，使用别名方式时，无须在配置url、method、data这些属性。

Axios库中提供了如下的别名方式：

scss 复制代码

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

其中，url是请求的接口。config是用来配置请求的额外选项，其配置内容和别名方式的配置是一样。例如，我们可以使用axios.post方法来发送Post请求。代码如下：

typescript 复制代码

export interface PostUserModel{
  id: string
  name: string
  email: string
  password: string
}

export interface PostModel{
  flag: boolean
  data: boolean
}

@State api: string = "http://localhost:8899/user"
axios.post<null,AxiosResponse<PostModel>,PostUserModel>(this.api,{
      id: "12",
      name: "lisi",
      email: "lisi@qq.com",
      password: "123456"
}).then((res: AxiosResponse<PostModel>)=>{
      
  }).catch((error)=>{
    console.log(JSON.stringify(error))
  })

3.创建axios实例

在项目开发中，我们发送的请求有很多的配置都是相同的，这时我们可以创建axios实例，调用实例的请求方法，用自定义配置新建一个axios实例。代码如下：

php 复制代码

const instance = axios.create({
   //地址的公共前缀
   baseURL: http://localhost:8899,
   //设置超时时间
   timeout: 5000,
   //自定义header
   headers: {'X-Custom-Header': 'custom'}
})

这样所有的请求都使用这个实例来发起，可以实现请求的定制化。我们可以使用如下的请求：

scss 复制代码

instance.request(config)
instance.get(url[, config])
instance.delete(url[, config])
instance.head(url[, config])
instance.options(url[, config])
instance.post(url[, data[, config]])
instance.put(url[, data[, config]])
instance.patch(url[, data[, config]])

4.配置全局的axios默认值

我们也可以通过axios的default属性来配置请求的默认值。代码如下：

ini 复制代码

instance.defaults.baseURL = 'http://localhost:8899'
instance.defaults.headers.post['Content-Type'] = 'application/json'

在以上代码中配置了全局的请求前缀和请求头的类型。

5.配置的优先级

注意：对以上各种配置进行合并时，会按照一定的优先级进行排序。优先级如下：

请求的config参数配置 > defaults属性配置 > axios默认配置

例如，下面的例子：

kotlin 复制代码

const instance = axios.create()
instance.defaults.timeout = 2500
instance.get<null,AxiosResponse<GoodsModel>,null>(this.api,{
timeout: 5000
})

使用axios创建实例此时的超时时间为默认值0，使用defaults属性设置后超时时间为2.5秒，在get方法中我们指定超时时间为5秒。后面的优先级要高于前面的。

6.请求和响应拦截器

拦截器的作用允许开发者在请求发起前或请求完成后进行拦截，从而能够对请求和响应进行一些处理。例如，在发送请求前在请求头里加上token。获取响应后如果token失效提醒用户重新登录。要对请求的开始进行拦截，你可以使用如下的代码。

javascript 复制代码

axios.interceptors.request.use((config: InternalAxiosRequestConfig) => {
    return config
},(error: AxiosError) =>{
    return Promise.reject(error)
})

在以上代码中，我们使用axios.interceptors.request.use()方法添加请求的拦截。例如。我们在项目中通常会为请求头添加token验证，如下代码所示。

javascript 复制代码

axios.interceptors.request.use((config: InternalAxiosRequestConfig) => {
   config.headers.Authorization = PreferencesUtil.getToekn()
   return config
 },(error: AxiosError) =>{
   return Promise.reject(error)
})

在以上代码中，我们在请求开始前添加了token验证的Authorization字段。要对请求完成后进行拦截，可以通过axios.interceptors.response.use()方法添加拦截，代码如下：

javascript 复制代码

axios.interceptors.response.use((response: AxiosResponse) => {
    return config
  },(error: AxiosError) =>{
    return Promise.reject(error)
})

我们在项目中可以对请求完成进行拦截，例如，当用户登录状态失效时可以统一处理，代码如下：

javascript 复制代码

axios.interceptors.response.use((response: AxiosResponse) => {
   if(response.data.code === 1004){
     PreferencesUtil.saveToken("")
     router.replaceUrl({url: 'pages/LoginPage'})
   }
   return response
 },(error: AxiosError) =>{
   return Promise.reject(error)
})

注意：拦截器的添加是和axios请求实例绑定的，之后使用axios实例发起的请求都会被拦截。

可以使用如下方式在不需要拦截器的时候将其移除，代码如下：

vbscript 复制代码

let i = axios.interceptors.request.use(...)
axios.interceptors.request.eject(i)
let j = axios.interceptors.response.use(....)
axios.interceptors.response.eject(j)

响应结构

通过axios发送的请求，axios都会返回一个Promise对象，通过此Promise对象可以异步地等待数据返回，axios返回的数据是一个包装好的对象，有一定的结构。响应数据的结构如下图所示。例如，当我们发送请求时，当调用then()方法时，你将接收如下的响应。

总结

本文主要介绍了Axios 第三方库，Axios第三方库是一个可用于鸿蒙项目的网络请求库，基于axios进行适配。它提供了简洁且易用的 API，方便开发者进行接口数据的请求。通过学习本文内容，你可以掌握如何使用 axios 进行数据请求，提高开发效率。