vue 3.0 使用axios

一、安装axios ，vue-axios

	使用yarn:
	yarn add axios
	yarn add vue-axios
	使用npm
	npm install axios
	npm install vue-axios

二、在项目src文件夹建一个可以存放配置文件

三、 config.js文件用来存放后端请求接口地址

// config.js文件用来存放后端请求接口地址
	export default {
	  baseUrl: {
	    dev: '/api' // 开发环境
	    // dev: 'http://118.89.35.95:8080'
	    // pro: "http://production.com" 生产环境
	  }
	}

四、封装axios的请求方式(get请求、post请求)、axios超时请求时间和token

	 // http.js封装axios的请求方式(get请求、post请求) 
	 // 封装axios超时请求时间
	 // token设置
	
	
	import axios from 'axios' // 引用axios
	import config from '@/api/config'
	
	const _baseUrl = config.baseUrl.dev // 使用到代理
	const apiUrl = _baseUrl
	// axios 配置
	axios.defaults.timeout = 120000 // 设置接口响应时间
	axios.defaults.baseURL = 'http://192.168.105.42:8088' // 这是调用数据接口,公共接口url+调用接口名
	
	// 增加token（先写了个固定的token，实际项目中应该是通过接口获取到token）
	axios.defaults.headers.common['X-Access-Token'] = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzkxMTYzMzcsInVzZXJuYW1lIjoiYWRtaW4ifQ.YPJ7BV_Pg27NtPVk0FfoYsTXRpR35KXA64mMDibUzHI';
	
	axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
	
	
	
	// 封装get请求
	export function get (url, params = {}) {
	  return new Promise((resolve, reject) => {
	    axios
	      .get(url, {
	        params: params
	      })
	      .then(response => {
	        resolve(response)
	      })
	      .catch(err => {
	        reject(err)
	      })
	  })
	}
	// 封装post请求
	export function post (url, data = {}) {
	  return new Promise((resolve, reject) => {
	    axios.post(url, data).then(
	      response => {
	        // console.log(response.data.code)
	        resolve(response.data)
	      },
	      err => {
	        reject(err)
	      }
	    )
	  })
	}

五、封装的get/post请求方法

	// index.js 调用接口的方法
	// 引入封装的get/post请求方法
	import { get, post} from '@/api/http'
	
	export const getD = (url,m) => get(url,m)
	export const postD = (url,m) => post(url,m)

六、.vue接口调用

	data(){
		return{
			url:{
				getHomePageHeadMessage:'/ipdata-boot/statistics/qdBaseinfo/getHomePageHeadMessage'
			},
			params:{
				stardate: '2021-01-01',
				endate: '2021-12-31',
				apptype: 1			
			}
		}
	},
	methods: {
		init() {
			getD(this.url.getHomePageHeadMessage,this.params) 
				.then(res => {
					console.log(res)
				})
				.catch(err => {
					console.log(err)
				})
		},
	}