vue-element-admin框架中axios模块的使用

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现，帮助我们迅速搭建一个后台的前端页面。本文只介绍其中axios模块的使用，想要更深入的了解请参考官方文档。

框架中请求后台数据的函数在api包下:

初始打开有很多js文件，这是该框架里面自带的，如果你不想用它提供的，你可以自己创建一个js文件，下面是该文件中一个示例内容：

import request from '@/utils/request'

//更新电影
export function updateMovie(data) {
  return request({
  	//请求的后端接口，拿到后台数据
    url: 'http://localhost:8090/ssm/movie/updateMovieById',
    //请求方式
    method: 'post',
    //提交的参数,其中本应该是data:data形式，但是因为request中参数data与该函数参数同名就只用写一个data即可
    data
  })
}

说明： import request from '@/utils/request'是必须要写的，其中@指src，我们点开src/utils/request.js该路径下的文件:

发现其实框架已经为我们封装好axios模块了，其中发现有一个参数为request的箭头函数和一个参数为response的箭头函数：

//request匿名函数
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

//response匿名函数
response => {
    const res = response.data

	//这里20000是请求完数据，后台响应成功的状态码，我们也可以自定义
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },

看到这里发现在api包下我们自定义的访问接口的文件中先要有import request from '@/utils/request'即导入src/utils/request文件，然后就可以使用该文件中上述两个匿名函数实现对接口的访问。

简单地说上述框架已经帮我们配置好了，我们只需要传入接口和我们的数据即可访问后台，完成前后端的交互

那么页面如何使用我们定义的函数呢？
如下图所示:

<script>
	//1.首先要在该页面中导入我们自定义的函数 updateMovie
	import { updateMovie } from '@/api/movie' 
	
	//2.直接调用该函数，传递我们的数据 yourData
	updateMovie(yourData).then((response)=>{
       	//这里进入回调函数，即拿到后台响应的数据 response
       	//后续再对数据进行你想要的一些操作
       	this.XXX=response.data;
      }
    )
</script>