程序员必备编程之基于vue的 Nuxt.js(四) ajax操作

布满荆棘的人生 2023-03-13 03:13 4阅读 0赞

我的所有博文主要在我的另一个博客地址发布  
如果对技术热爱者非常欢迎, 让我们一起探讨,共勉, 点击↓博客地址进入  
**[博客地址][Link 1]**

# 程序员必备编程之 Nuxt.js(四) ajax操作 #

## 一. **整合axiox** ##

*  在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合。
 *  整合效果：
 *  
 *  1）package.json有axios的版本

![img][]

*  2）nuxt.config.js 以模块的方式添加axios

![img][img 1]

*  常见配置，修改 nuxt.config.js 进行baseURL的配置(根据自己后台配置路径更改即可)

![img][img 2]

axios: {
        baseURL:'http://localhost:10010/api'	//配置网关地址
      },

## 二. 普通ajax（nuxt和axios整合） ##

普通axios操作this. a x i o s 就 可 以 获 得 a x i o s 实 例 ， 从 而 发 送 a j a x / / g e t 请 求 t h i s . axios 就可以获得axios实例，从而发送ajax //get请求 this. axios就可以获得axios实例，从而发送ajax//get请求this.axios.get(‘路径’,参数) //post请求 this.$axios.post(‘路径’,参数)

举例使用:

<template>
      <div>
        普通ajax（nuxt整合axios）<br/>
        
        <input type="button" @click="findAllFn" value="点击发送">
        {
       {pageInfo}}
      </div>
    </template>
    
    <script> export default { methods: { async findAllFn() { //发送ajax let { data } = await this.$axios.get('/userservice/user/list') //保存数据 this.pageInfo = data.data } }, data() { return { pageInfo: '' } }, } </script>
    
    <style> </style>

## 三. **使用asyncData发送异步数据** ##

### 1. 使用asyncData–一次请求 ###

asyncData中的ajax将在“前端服务端执行”，在浏览器看到是数据，而不是ajax程序。

asyncData 方法，在渲染组件 之前 异步获取数据。asyncData方法会在组件（**限于页面组件**）每次加载之前被调用。asyncData方法在组件渲染之前执行了，组件还没有渲染，没有this。在asyncData方法中，不能使用this。

### ![img][img 3] ###

*  #### asyncData语法1：使用 context 对象 ####
 *  举例使用:

<template>
    	{
       {名称}}
    </template>
    <script> export default { //asyncData不能使用this（当前组件） //提供第一个参数context，表示上下文（nuxt所有功能） asyncData( context ) { //发送ajax let 数据 = context.$axios.get('','') // 将数据组合并返回 return { 名称: 数据 } } } </script>

####  ####

#### •asyncData语法2：对context对象进行解构，context.$axios —> \{ $axios \} ####

#### **普通ajax和asyncData对比** ####

![img][img 4]

### 2.使用asyncData–多次请求 ###

*  多次请求，需要借助 Promise （ $axios.get() 返回的就是 Promise对象 ）

//对“响应对象”进行解构   响应1 --> { data }
    //“响应1”和“响应2”，都可以解构出data，变量名重复，建议采用别名 { data: 别名}
    export default {
        async asyncData( {$axios} ) {
            //发送多次请求
            let [ { data: d1 }, {data:d2} ] = await Promise.all([请求1, 请求2])
            //返回数据
            return {
                变量1: d1.data, 
                变量2: d2.data
            }
        }
    }
    </script>

*  实例1：Promise.all 发送1个请求

<template>
      <div>
          {
       {pageInfo}}
      </div>
    </template>
    
    <script> export default { async asyncData({ $axios }) { //发送ajax let [ { data} ] = await Promise.all([ $axios.get('/userservice/user/list') ]) //返回 return { pageInfo : data.data } }, } </script>
    
    <style> </style>

*  实例2：Promise.all 发送2个请求

<template>
      <div>
          {
       {pageInfo}}
          {
       {list}}
      </div>
    </template>
    
    <script> export default { async asyncData({ $axios }) { //发送ajax let [ { data : d1 }, { data : d2} ] = await Promise.all([ $axios.get('/userservice/user/list'), $axios.get('/userservice/user/list2') ]) //返回 return { pageInfo : d1.data, list : d2.data } }, } </script>
    
    <style> </style>

## 三. fetch发送ajax ##

*  fetch 方法用于在渲染 页面前 填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。
 *  对比图

![img][img 5]

#### 当然,要使用fetch发送ajax还得先学习整合vuex(状态树) ####

*  在nuxt中，只编写vuex的核心内容。

![img][img 6]

*  编写内容

//state区域，相当于定义变量
    export const state = () => ({
      
    })
    
    //mutations区域，用于修改数据
    export const mutations = {
      方法名 (state,值) {
        
      }
    }
    
    
    
    
    –state区域注意实现
     //state 区域，相当于定义变量
    export const state = ()=> {
      return {
    
      }
    }
    //省略写法
    export const state = () => ({
      
    })

举例使用:

*  1.  创建 ~/store/index.js ，编写如下内容

//state 区域，相当于定义变量
    export const state = () => ({
      pageInfo: ''
    })
    
    //mutations区域，用于修改数据
    export const mutations = {
      setData( state , value) {
        state.pageInfo = value
      }
    }

*  1.  完成fetch操作

<template>
      <div>
          {
       { this.$store.state.pageInfo }}
      </div>
    </template>
    
    <script> export default { async fetch( { $axios, store } ) { //发送ajax let { data } = await $axios.get('/userservice/user/list') console.info( data ) //将查询结果保存vuex store.commit('setData', data.data ) } } </script>
    
    <style> </style>

#### 同时需要注意的小知识点: ####

localStorage 和 sessionStorage在这里用不了,会出现一个错误

*  localStorage 和 sessionStorage 都是浏览器端对象，在前端服务端没有。如果在created()使用以上2个变量，程序将抛异常（对象没有声明）

![img][img 7]

#### 结论; ####

在nuxt.js中，将之前存放在created()中的代码，移植到 mounted()

<template>
    
    </template>
    
    <script> export default { /* //created()函数在“客户端”和“服务端”都被调用，localStorage只能在客户端使用 created() { localStorage.setItem('name','测试数据') }, */ mounted() { localStorage.setItem('name','测试数据') }, } </script>

## 四.自定义axios ##

*  自定义axios目的：编写一个api.js文件，用于统一维护请求路径
 *  步骤一：前提，修改nuxt.config.js，编写axios baseURL

![img][img 8]

*  步骤二：创建 ~/plugins/api.js 文件，并在nuxt.config.js文件进行配置（仅客户端可用）

![img][img 9]

plugins: [
        // { src: '~/plugins/my.js' },
        // { src: '~/plugins/my.js',mode: 'client' },
        { src: '~/plugins/my.js', mode: 'server' },
        { src: '~/plugins/api.js', mode: 'client' },
      ],

![img][img 10]

*  步骤三：修改api.js，拷贝固定内容

//自定义函数
    const request = {
      test : (params) => {
        return axios.get('/web-service/test',{
          params
        })
      },
    }
    
    var axios = null
    export default ({ $axios }, inject) => {
    
      //3） 保存内置的axios
      axios = $axios
    
      //4) 将自定义函数交于nuxt
      // 使用方式1：在vue中，this.$request.xxx()
      // 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()
    
      inject('request', request)
    }

*  步骤四：其他组件中发送ajax
 *      <template>
          <div>
        
          </div>
        </template>
        
        <script> export default { //页面加载成功 async mounted() { //发送ajax let { data } = await this.$request.findAll() console.info( data ) }, } </script>
        
        <style> </style>
 *  步骤五：修改api.js 编写具体的功能

//自定义函数
    const request = {
      test : (params) => {
        return axios.get('/web-service/test',{
          params
        })
      },
      //方法名 : 函数
      findAll : () => {
        return axios.get('/userservice/user/list')
      }
    }

### 自定义axios：原理分析 ###

![img][img 11]

学完这里,你就可以在Nuxt.js中差不多可以来去自如

可以去操作编写一些页面了,快去试试吧!

**看完恭喜你,又知道了一点点!!!  
你知道的越多,不知道的越多!  
~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!**

[Link 1]: https://my.oschina.net/ithuang
[img]: /images/20230312/f4f6ca49432a4c26952eda792a8820cb.png
[img 1]: /images/20230312/78aaa94054f845d4917ef0ac4d143082.png
[img 2]: /images/20230312/ced4dabe4a2c453fb6ffa1c5d730d1b0.png
[img 3]: /images/20230312/ff95c3975e674b97813b7c83d077beb4.png
[img 4]: /images/20230312/d1f92bae53e04b76a3bf1e2e71491227.png
[img 5]: /images/20230312/6272a0b81a3f491ea467092561e75bd3.png
[img 6]: /images/20230312/4e598336491a486e9f1d5482fd2ae0a1.png
[img 7]: /images/20230312/c457b33016e44f7d82ede97b06c319ea.png
[img 8]: /images/20230312/d90f01def77b4f3ab7441a2e8a60cf3a.png
[img 9]: /images/20230312/5bc35bd440ff4682845a030cdd5efed1.png
[img 10]: /images/20230312/a44adc9596b94ac797d642b3665e10f9.png
[img 11]: /images/20230312/b2152f83c5e943c797cc4c10041094b0.png