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);
});
