vue中的网络请求

vue中的网络请求

• Ajax

$.ajax({
   url : "",
   type : "",
  data   : "",
   header : {},
   dataType : "",
   success : function(res){},
   error    : function(res){}
})

ajax请求流程

• JS底层 xmlHttp对象

// 1、创建xmlHttp对象
var xhr = new XMLHttpRequest();
// 2、注册事件,监听网络请求过程
xhr.onreadystatechange = function(){
  /*
      0: xhr.open未调用 
      1: xhr.open方法已调用，xhr.send
      2: xhr.send已调用，服务器未响应
      3: 响应链接已经建立，开始响应数据，但未结束
      4: 后端回发数据结束，断开连接，网络请求结束
  */
  if(xhr.readyState == 4){
    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
           //响应数据
           xhr.responseText
    }
  } 
  
}
//3、网络请求基本配置
xhr.open('get','/login?user=1&pass=2',true)
xhr.open('post','/login',true)

//5、请求头配置
xhr.setRequestHeader({key : value})
//4、发送请求
xhr.send() ; //get
xhr.send('user=1&pass=2') //post

//5、监听请求失败
xhr.onerror  = function(){
   //请求失败回调
}

• AJax 库

1. 原生： jquery $.ajax()
2. Axios Fetch
   • 请求拦截
   • 响应拦截

• 请求跨域
• 跨域概念
• 出现情景
• 解决方案

Vue中网络请求

跨域

使用ajax请求的时候，如果发送请求的页面url 同 接口 url的 协议、ip(域名)，端口号，只要有一个同，那么浏览器就会阻止服务器的响应， 这是浏览器的一种安全机制，这种请求称为：跨域请求

目标url

Request URL: http://172.30.1.97:8080/user/login.do

发送网络请求的url

login页面： http://172.30.1.120:8080/#/login

前端解决：采用代理服务器

vue项目配置方法

vue.config.js文件

moudel.exports = {
  devServer : {
     proxy : "http://url"
  }
}

axios

ajax封装库，通过创建请求对象，调用方法、属性来实现网络请求，自带请求拦截和响应拦截
使用：先做二次封装，再使用

安装

npm i axios --save

数据格式

var obj = {      // json
    name : "张三",
    age  : 12,
    sex  : "男"
}
//编码
var str = qs.stringify(obj)
console.log(str,"dddddddddd");
console.log(qs.parse(str));

注意：前后端交互时第一个类容易出现问题，发送的数据格式 与后端接收数据格式不一致

• json数据。 后端要求收到一个 json字符串，前端必须发送json 字符串

axios默认设置

• formData 表单数据， 后端要求接收一个 key1=value1&key2=value2的字符串，前端必须拼接成对应的格式发送

  form表单标签默认发送的就是这种格式

  $.ajax默认发送也是formData

  其他就需要自己拼接转换。