Vue使用axios

1.首先得安装吧~

npm install --save axios vue-axios

2.config–>建一个js文件，名字看你

3.http.js 里：

import axios from 'axios'			//引入axios

const http = axios.create({			
    baseURL: '',					//接口根路径
    timeout: 90000, 				//请求超时时间
})
//post请求方式
export function post(url, data) {

        //Promise异步操作函数 resolve解析，reject拒绝
    return new Promise((resolve, reject) => {
        axios
            .post(url, data)
            .then(
                res => {
                    resolve(res.data)
                },
                err => {
                    reject(err.data)
                }
            )
            .catch(err => {
                reject(err.data)
            })
    })
}
//get请求方式
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params
            })
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.data)
            })
    })
}
//别忘了导出
export default http

4.main.js中导入http

import http from './config/http'
//挂载全局
Vue.prototype.$http = http
Vue.config.productionTip = false

new Vue({
	el:"#app",
	http,

	render: h => h(App)
})

5.页面中可以用来调接口了。
例如：

	get请求并传参，无参数的时候只写接口地址:
		
getSource(){
	this.$http.get( '接口地址=${要传的数据}' ,{headers:{'Content-Type': '请求头格式'}}).then(res => {
		console.log(res)  //成功返回信息
}).catch(err => {
		console.log(err)	//失败返回信息
})
}

---

	post请求并传参，无参数可省略不写
		JSON.stringfy转换所传数据的格式为 "":"" 的格式
		此处所传数据是表单数据，所以请求头为application/json
getSource(){
	this.$http.post( '接口地址' ,JSON.stringify(要穿的数据对象),{headers:{'Content-Type': 'application/json'}}).then(res => {
		console.log(res)			 //成功返回信息
}).catch(err => {
		console.log(err)			//失败返回信息
})	
}

6.拿到接口数据并渲染，可在data中定义变量，将res传给data中的变量