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

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

一. 整合axiox

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

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

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

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

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

普通axios操作this. $axios 就可以获得axios实例，从而发送ajax //get请求 this.$ axios.get(‘路径’,参数) //post请求 this.$axios.post(‘路径’,参数)

举例使用:

<template>
  <div>
    普通ajax（nuxt整合axios）<br/>
    <!-- 提供按钮，点击按钮，发送ajax查询结果，并将结果显示按钮下面 -->
    <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。

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 }

 <script>
export default {
    async asyncData( {$axios} ) {
        //发送ajax
        let { data } = await $axios.get('路径')
        //封装
        return {
            变量: 查询数据
        }
    }
}
</script>
 
•示例
<template>
  <div>
    {{pageInfo}}
  </div>
</template>

<script>
export default {
  async asyncData( context ) {
      //发送ajax
      let { data } = await context.$axios.get('/userservice/user/list')
      //组合数据
      return {
        pageInfo: data.data
      }
  },
}
</script>

<style>

</style>

普通ajax和asyncData对比

2.使用asyncData–多次请求

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

<script>
//很少直接使用“响应对象”
export default {
    async asyncData( {$axios} ) {
        //发送多次请求
        let [响应1,响应2] = await Promise.all([请求1, 请求2])
        //返回数据
        return {
            变量1: 响应1,
            变量2: 响应2
        }
    }
}
</script>

//对“响应对象”进行解构   响应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 方法类似，不同的是它不会设置组件的数据。
对比图

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

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

编写内容

 //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个变量，程序将抛异常（对象没有声明）

结论;

在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

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

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

步骤三：修改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：原理分析

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

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

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

煌sir

原创文章 8 获赞 5 访问量 336

关注私信

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