axios数据请求

axios 之 get 与 post

请求方式默认是get 可以忽略，

安装

• 使用bootcdn 或者npm 安装 axios

• <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
  如果是引入的话最好放入到vue引入的下面

• $ npm install axios

get 请求写法一

axios.get('http://localhost/get.php',{
			method: 'get',
			params: {
				a: 1,
				b: 2
			}
    })
	.then( res => {
	console.log( res )
       })
	.catch( error => {
		 if( error ){
		        throw error
	         }
	}) 

get请求写法二

axios({
	url: 'http://localhost/get.php',
	method: 'get',
	params: {
		a: 1,
		b: 2
	}
})
	.then( res => {
	console.log( res )
   })
	.catch( error => {
	  if( error ){
		throw error
            }
   })

这些请求写在new Vue中的methods中

post请求写法

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//这里的请求头写法是对于整个文档

let params = new URLSearchParams()    //这个api 来自nodejs中URL模块

// params.append(key,value)
      params.append('a',1)
     params.append('b',2)

axiosPostHandler(){  //这里的是写在methods里面的
/* post 方法 */
            axios({
		url: 'http://localhost/post.php',
		method: 'post',
		data: params,
		headers: {
		        'Content-Type': "application/x-www-form-urlencoded"  //这个请求头写法是针对于这一个post请求
		         }
		})
		.then(res => {
		console.log( res )
		     })
		.catch( error => {
		if( error ){
		       throw error
		       }
		    })
  }

post可能遇见问题的解决办法

• 统一设置请求头
  axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
• 使用 URLSearchParams 实例化一个params对象
• 使用params对象的append方法添加数据

不管是fetch还是axios ，都是promise对象

前端解决跨域的两种方法

• Nodejs中间件代理跨域

• jsonp跨域

后端解决跨域的一个解决方案

   header（ 'Access-Control-Allow-Origin:*'）   这句话是写在php的头部里面