nuxt3使用axios

在Nuxt.js中，我们通常使用Axios来进行网络请求。在Nuxt3中，Axios仍然是常用的网络请求库，但是Nuxt3对Axios进行了一些封装，以便更好地集成到Nuxt3应用程序中。

在Nuxt3中，Axios被封装在@nuxt/http模块中。@nuxt/http模块提供了一些与Axios相关的功能，例如自动注入Axios实例、拦截器、全局错误处理等。下面是一些常用的@nuxt/http模块的功能：

自动注入Axios实例：在Nuxt3中，我们不需要手动创建和配置Axios实例，@nuxt/http模块会自动注入一个Axios实例。可以在nuxt.config.js中配置Axios实例的默认配置和拦截器等。

// nuxt.config.js
export default {
  modules: ['@nuxt/http'],

  http: {
    // 设置Axios实例的默认配置
    baseURL: 'https://api.example.com',
    headers: {
      common: {
        'Content-Type': 'application/json'
      }
    }
  }
}

拦截器：@nuxt/http模块提供了拦截器，可以在请求和响应过程中进行拦截和处理。例如，可以在请求前添加一些默认的请求头，或者在响应后对返回的数据进行处理。

// nuxt.config.js
export default {
  modules: ['@nuxt/http'],

  http: {
    // 设置Axios实例的拦截器
    interceptors: {
      request: (config) => {
        // 在请求前添加一些默认的请求头
        config.headers.common['Authorization'] = 'Bearer token'
        return config
      },
      response: (response) => {
        // 在响应后对返回的数据进行处理
        return response.data
      }
    }
  }
}

全局错误处理：@nuxt/http模块提供了一个全局错误处理机制，可以在应用程序中捕获所有的网络请求错误，例如网络连接错误、服务器错误等。

// nuxt.config.js
export default {
  modules: ['@nuxt/http'],

  http: {
    // 设置全局错误处理
    onError: (error) => {
      // 在控制台输出错误信息
      console.error(error)
    }
  }
}

总之，@nuxt/http模块为Nuxt3中的Axios请求提供了很多便利的功能和配置选项，可以使我们更好地集成和使用Axios。

在组件或插件中使用

在Nuxt3中，使用@nuxt/http模块封装的Axios进行网络请求非常简单。我们可以在任何Vue组件或Nuxt插件中使用$http对象，它是一个已经注入了Axios实例的对象，包含了Axios的所有方法和属性。

例如，在Vue组件中使用$http对象发起网络请求：

export default {
  async created() {
    try {
      const response = await this.$http.get('/api/users')
      console.log(response.data)
    } catch (error) {
      console.error(error)
    }
  }
}

在上面的代码中，我们使用了$http对象的get方法来发起GET请求。如果请求成功，返回的数据会存储在response.data中。如果请求失败，将会抛出一个错误。

类似地，在Nuxt插件中使用$http对象发起网络请求也非常简单：

export default ({ $http }) => {
  const getUsers = async () => {
    try {
      const response = await $http.get('/api/users')
      console.log(response.data)
    } catch (error) {
      console.error(error)
    }
  }

  return {
    getUsers
  }
}

在上面的代码中，我们将$http对象作为参数传递给Nuxt插件。然后，我们定义了一个名为getUsers的函数，它使用$http对象的get方法来发起GET请求。最后，我们将getUsers函数作为插件的输出返回。

总之，使用@nuxt/http模块封装的Axios进行网络请求非常简单，只需要在代码中使用$http对象即可。此外，@nuxt/http模块还提供了许多其他功能和选项，例如拦截器、全局错误处理等，可以在nuxt.config.js中进行配置。

nuxt3使用axios