fetch和axios的使用

fetch和axios的使用

告别XMLHttpRequest

XMLHttpRequest是一个设计非常粗糙得API，配置和调试方式非常混乱，而去基于事件得已不模型邪气来不友好。兼容性不好

fetch()方法与XMLHttpRequest类似，fetch也可以发起ajax请求，但是与XMLHttpRequest不同的是，fetch方式使用Promise，相比较XMLHttpRequest更加的简洁。

fetch的使用

url参数是必须要填写的，option可选，设置fetch调用时的Request对象，如method、headers等
比较常用的Request对象有：

method - 支持 GET, POST, PUT, DELETE, HEAD
url - 请求的 URL
headers - 对应的 Headers 对象
body - 请求参数（JSON.stringify 过的字符串或’name=jim\u0026age=22’ 格式)

fetch方法的then会接收一个Response实例，值得注意的是fetch方法的第二个then接收的才是后台传过来的真正的数据，一般第一个then对数据进行处理等。

fetch在get请求中的使用

在methods:里面定义一个方法btnFetch()

btnFetch(){
	fethch("json路径")
		.then(res=>res.json())
		.then(res=>{
			console.log(res)
		})
		.cathch(err=>{
			console.log(err)
		})
}

fetch在post请求中的使用

//post-1
fetch("路径"，{
	method:'post',
	headers:{
		"Content-Type":"applicecation/x-www-form-urlencoded"//编码格式
	},
	body:"name=yuanrun&age=100",
}).then(res=>res.json()).then(res=>{console.log(res)});



//post-2
 // bookname=js编程&author=丁鹿学堂学员&publisher=北京出版社
fetch("http://xxxxxxxxxxxxxxxxxxxx"，{
	method:'post',
	headers:{
		"Content-Type":"applicecation/json"//编码格式
	},
	body:JSON.stringify({
		//请求的数据
        bookname: 'jq编程',
        author: '学员',
        publisher: '上海出版社',
	})
}).then(res=>res.json()).then(res=>{console.log(res)});

axios的使用

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

https://www.axios-http.cn/

特性

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

使用

• 引入

  <script src="./axios.min.js"></script>
  

• 使用

  // axios发起get请求
  btnAxios(){
  	axios.get("http://www.xxxxxxxxxx").then(res=>{
  		this.datalist=res.data.data.films
  	})
  }
  
  // axios发起post请求
  btnAxios(){
  	//axios.post("http://www.xxxxxxxxxx","bookname=js编程&author=丁鹿学堂学员")
  	axios.post("http://www.xxxxxxxxxx"," bookname: 'jq编程',author: '学员',")
          }.then((res) => {
                  //请求成功执行then方法
                  // res 响应成功返回的内容
                  console.log(res)
                })
                .catch((err) => {
                  console.log(err)
                })
  
  
  
  
  
      // bookname=js编程&author=丁鹿学堂学员&publisher=北京出版社
      axios({
        method: 'post', //请求方式
        url: 'http://www.liulongbin.top:3006/api/addbook', //请求的url
        data: {
          //请求的数据
          bookname: 'jq编程',
          author: '学员',
          publisher: '上海出版社',
        },
      })
        .then((res) => {
          //请求成功执行then方法
          // res 响应成功返回的内容
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })