1. 安装axios

npm install axios

2. 注册axios

我们一般会将服务端的调用都作为一个js文件封装起来，所以这里创建一个data.js的文件，在文件中可以如下创建请求

import axios from 'axios'

export const getWiSList = policyNo => {//定义一个方法调用，是有参数的调用，policyNo是调用后台的参数名，这个是个对象，所以可以是任意类型
    return axios.request({//使用request的方式，这样可以直接在内部config对应的各种方式及参数信息
        url: '/api/wi/getSurMsgByPolicyNo',//请求url
        method: 'post',//使用的调用方法
        data: policyNo//数据
    })
};

为了使用方便，我们一般会将后端的各个连接封装在vue.config.js中，这个文件需要放在根目录(与src同级别的目录)下才会被build的时候扫描到

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8001/avatarma',
                changeOrigin: true,//是否开启跨域请求访问
                pathRewrite: {
                    '/api': ''//url前缀
                
                }
            }
        }
    },
}

在main.js中添加如下信息

import router from './router'
import axios from 'axios';
Vue.use(axios)

3. 使用

在单独的vue文件中的script标签中可以这么使用

import {getData} from '@/api/data.js'
//这里是应用上面data.js中定义的请求后台的方法，需要应用多个方法可以在{}中使用,隔开

export default{
    mounted(){//vue的生命周期函数，代表着页面初始化的时候调用
        getData(this.policyNo).then(res=>{
            console.log(res.data)//res.data就是返回的信息，这里是任意类型的，这也是javaScript这个动态语言的好处
        })
    }
    
}

99. 基础的使用方法

Get方法使用

有参数有返回值

axios.get('http://localhost:8080/xxx/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Post方法使用

axios.post('http://localhost:8080/xxx/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });