vue-axios 使用的几种方式_添加axios的几种方式

vue-axios

0.axios 请求后台接口的几种方式

	  //全局注册方法
      this.$api.getListAPI('/test/list').then(res=>{
        console.info("全局注册方法："+res)
      })



      //使用http.js
      getListAPI('/test/list').then(res=>{
        console.info("http再次封装方法，vue导入："+res.data.data)
      })


      //封装http文件
      http.get('/test/list',null).then(res=>{
        console.info('封装http文件:'+res.data.data)
      })

      //将url前缀封装
      var a =  request({
        url:'/test/list',
        method: 'get',
      }).then(function(res){
        console.info('将url前缀封装:'+res.data)
      })

      //axios原生請求
      axios.get('http://localhost:10001/test/list').then(function(data){
        // alert(data)
        console.info('axios原生請求:'+data.data.data.records)
        _this.tableData = data.data.data.records;
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

1.编写baseUrl.js

let baseUrl = "";
switch ('dev') {
    case 'dev':
        baseUrl = "http://localhost:10001/"  //开发环境url
        break
    case 'serve':
        baseUrl = "http://localhost:10001/"   //生产环境url
        break
}
 console.log(baseUrl);
export default baseUrl;
1
2
3
4
5
6
7
8
9
10
11

2.封装axios到request.js

import axios from 'axios' //引入 axios
import baseUrl from '../api/baseUrl' //使用环境变量 + 模式的方式定义基础URL
 
// 创建 axios 实例
const service = axios.create({
  baseURL: baseUrl, // api 的 base_url
  timeout: 15000, // 请求超时时间
})
 
export default service
1
2
3
4
5
6
7
8
9
10

2.1此时已经可以调用了

在vue文件中导入request.js

<script>
import request from '@/utlis/request'

export default {
    name:"UserList",
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },
    created(currentPage){
      console.info('页码参数：'+currentPage)
      //此处是将this指向 为了让下面的可以调用外部this
      var _this = this;
      
      //将url前缀封装
      var a =  request({
        url:'/test/list',
        method: 'get',
      }).then(function(res){
        console.info('将url前缀封装:'+res.data)
        _this.tableData = data.data;
      })
      
      //axios原生請求
      axios.get('http://localhost:10001/test/list').then(function(data){
        console.info('axios原生請求:'+data.data)
        //将需要的值赋予外部数据
        _this.tableData = data.data;
      })
    },
    data() {
      return {
        tableData: []
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

3.配置通用前缀

let baseUrl = "";
switch ('dev') {
    case 'dev':
        baseUrl = "http://localhost:10001/"  //开发环境url
        break
    case 'serve':
        baseUrl = "http://localhost:10001/"   //生产环境url
        break
}
 console.log(baseUrl);
export default baseUrl;
1
2
3
4
5
6
7
8
9
10
11

4.配置http.js

/****   http.js   ****/
// 导入封装好的axios实例
import request from './request'

const http ={
    /**
     * methods: 请求
     * @param url 请求地址 
     * @param params 请求参数
     */
    get(url,params){
        const config = {
            method: 'get',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config = {
            method: 'put',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    delete(url,params){
        const config = {
            method: 'delete',
            url:url
        }
        if(params) config.params = params
        return request(config)
    }
}
//导出
export default http

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

5.再次封装

import http from '../utlis/http'
// 
/**
 *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
let baseUrl = ""

// get请求
export function getListAPI(url,params){
    return http.get(`${baseUrl}`+url,params)
}
// post请求
export function postFormAPI(params){
    return http.post(`${baseUrl}`+url,params)
}
// put 请求
export function putSomeAPI(params){
    return http.put(`${baseUrl}`+url,params)
}
// delete 请求
export function deleteListAPI(params){
    return http.delete(`${baseUrl}`+url,params)
}
export default function(Vue) {
    //添加全局API
    Vue.prototype.$api = {
        getListAPI,postFormAPI,putSomeAPI,deleteListAPI
    }
   }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

6.全局注册

在main.js中导入

import api from '@/api/api'

Vue.use(api)
1
2
3

7.使用

		//全局注册方法
      this.$api.getListAPI('/test/list').then(res=>{
        console.info("全局注册方法："+res)
      })
1
2
3
4

8.非全局注册使用

import {getListAPI,postFormAPI, putSomeAPI, deleteListAPI} from '@/api/api'

//使用http.js
      getListAPI('/test/list').then(res=>{
        console.info("http再次封装方法，vue导入："+res.data.data)
      })
1
2
3
4
5
6

9.直接引入http也可以使用

import http from '@/utlis/http'

//封装http文件
http.get('/test/list',null).then(res=>{
   console.info('封装http文件:'+res.data.data)
})
1
2
3
4
5
6