掌握鸿蒙网络请求: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的方式来安装,安装指令如下:

ohpm install @ohos/axios

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

掌握鸿蒙网络请求:Axios网络请求库快速入门
安装成功之后在oh-package.json5配置文件中找到Axios的配置信息和对应的版本号。如下图所示。

掌握鸿蒙网络请求:Axios网络请求库快速入门
oh_modules目录下也会安装这个第三方的库。如下图所示。

掌握鸿蒙网络请求:Axios网络请求库快速入门
现在,我们就成功将Axios(@ohos/axios)第三方库安装到项目中。

2.使用案例

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

掌握鸿蒙网络请求:Axios网络请求库快速入门
接下来,我们将发送一个简单的Get请求。请求接口如下:

http://localhost:8899/goods/byrandom

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

掌握鸿蒙网络请求:Axios网络请求库快速入门
首先,在项目中引入axios

import axios from '@ohos/axios'

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

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()方法获取结果并打印,如下图所示。

掌握鸿蒙网络请求:Axios网络请求库快速入门
可以看见控制台上打印出来了商品的信息。将请求到的数据渲染到页面上,代码如下:

@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网络请求库快速入门

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

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

1.通过配置创建请求

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

axios(config)
axios(url,config)

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

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))
  })
}

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

掌握鸿蒙网络请求:Axios网络请求库快速入门
掌握鸿蒙网络请求:Axios网络请求库快速入门
例如,我们可以使用baseURL统一接口请求的前缀,使用timeout指定超时时间,使用params指定查询参数。代码如下:

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库中提供了如下的别名方式:

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请求。代码如下:

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实例。代码如下:

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

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

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属性来配置请求的默认值。代码如下:

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

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

5.配置的优先级

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

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

例如,下面的例子:

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失效提醒用户重新登录。
要对请求的开始进行拦截,你可以使用如下的代码。

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

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

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()方法添加拦截,代码如下:

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

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

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实例发起的请求都会被拦截。

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

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返回的数据是一个包装好的对象,有一定的结构。响应数据的结构如下图所示。
掌握鸿蒙网络请求:Axios网络请求库快速入门
例如,当我们发送请求时,当调用then()方法时,你将接收如下的响应。

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

总结

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

原文链接:https://juejin.cn/post/7316354375700987942 作者:亭峰科技

(2)
上一篇 2023年12月26日 下午5:05
下一篇 2023年12月26日 下午5:15

相关推荐

发表回复

登录后才能评论