精华内容
下载资源
问答
  • axios

    2021-09-03 13:46:35
    axios.get(url[,config]) axios.delete(url[,config]) axios.head(url[,config]) axios.post(url[,data[,config]]) axios.put(url[,data[,config]]) axios.patch(url[,data[,config]]) import axios from 'axios' ...

    axios请求方式:

    axios(config)
    axios.request(config)
    axios.get(url[,config])
    axios.delete(url[,config])
    axios.head(url[,config])
    axios.post(url[,data[,config]])
    axios.put(url[,data[,config]])
    axios.patch(url[,data[,config]])
    import axios from 'axios'
    
    //1.axios基本使用
    axios({
      url:'http://123.207.32.32:8000/home/multidata',
      //method:'post'
    }).then(res=>{
      console.log(res);
    })
    
    axios({
      url:'http://123.207.32.32:8000/home/data',
      //专门针对get请求的参数拼接
      params:{
        type:'pop',
        page:1
      }
    }).then(res=>{
      console.log(res);
    })
    //2.axios发送并发请求
    axios.all([axios({
      url:'http://123.207.32.32:8000/home/data'
    }),axios({
      url:'http://123.207.32.32:8000/home/data',
      params:{
        type:'sell',
        page:5
      }
    })]).then(result=>{
      console.log(result);
    })

    全局配置

    //全局配置
    axios.defaults.baseURL='http://123.207.32.32:8000'
    axios.defaults.tiemout=5000

    常见的全局配置


    不要在项目中多次使用同一个第三方框架(框架不再维护,修改起来非常麻烦)

    对第三方框架进行模块封装

    //network文件夹下request.js
    import axios from 'axios'
    
    export function request(config,sucess,failure){
      //1.创建axios的实例
      const instace=axios.create({
        baseURL:'http://123.207.32.32:8000',
        timeout:5000
      })
    
      //3.发送真正的网络请求
      instanceof(config)
      .then(res=>{
        console.log(res);
        sucess(res)
      })
      .catch(err=>{
        console.log(err);
        failure(err)
      })
    }
    //5.封装request模块
    import {request} from "./network/request"
    
    request({
      url:'/home/multidata'
    },res=>{
      console.log(res);
    },err=>{
      console.log(err)
    })

    axios拦截器

    用于在发送每次请求或者得到回应后,进行对应的处理。

      //2.axios拦截器
      //2.1请求拦截
      instance.interceptors.request.use(config=>{
        console.log(config);
        //1.config中的一些信息不符合服务器的要求
        //2.每次发送网络请求时,希望在界面中显示一个请求的图标
        //3.某些网络请求(比如登录(token)),必须携带一些特殊信息
        return config;
      },err=>{
        console.log(err)
      })
    
      //2.2响应拦截
      instance.interceptors.response.use(res=>{
        console.log(res);
        return res.data;
      },err=>{
        console.log(err);
      })
    展开全文
  • Axios

    2021-02-01 15:49:33
    Axios Axios是一个基于promise的HTTP库 浏览器支持情况:Chrome、Firefox、Safari、Opera、Edge、IE8+ ...axios(url, [config]) config 配置对象 最常用的配置: axios({ method: 'get', // post、get、

    Axios

    Axios是一个基于promise的HTTP库

    浏览器支持情况:Chrome、Firefox、Safari、Opera、Edge、IE8+

    引入

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    API

    • axios(config)
    • axios(url, [config])

    config 配置对象

    最常用的配置:

    axios({
      method: 'get', // post、get、put....
      baseURL: '', // 请求的域名,基本地址
      url: '', // 请求的路径
      params: {}, // 会将请求参数拼接在url上
      data: {}, // 会将请求参数放在请求体中
      headers: {}, // 设置请求头,例如设置token等
      timeout: 1000, // 设置请求超时时长,单位:ms
    })
    

    方法别名

    为方便起见,为所有支持的请求方法提供了别名。

    • axios.request(config)
    • axios.get(url, [config])
    • axios.post(url, [data], [config]])
    • axios.delete(url, [config])
    • axios.head(url, [config])
    • axios.put(url, [data], [config])
    • axios.patch(url, [data], [config]])
    • axios.options(url, [config])

    配置默认值

    可以指定将被用在各个请求的配置默认值

    全局配置

    axios.defaults.baseURL = 'https://developer.duyiedu.com/vue';
    axios.defaults.timeout = 1000;
    

    在实际项目中,很少用全局配置。

    实例配置

    可以使用自定义配置新建一个axios实例

    const instance = axios.create({
      baseURL: 'https://developer.duyiedu.com/vue',
      timeout: 1000,
    })
    
    instance.get('/getUserInfo').then(res => {
      // ...
    })
    

    请求配置

    const instance = axios.create();
    instance.get('/getUserInfo', {
      timeout: 5000
    })
    

    配置的优先顺序

    全局 < 实例 < 请求

    并发

    同时进行多个请求,并统一处理返回值

    • axios.all(iterable)
    • axios.spread(callback)
    axios.all([
      axios.get('/a'),
      axios.get('/b')
    ]).then(axios.spread((aRes, bRes) => {
      console.log(aRes, bRes);
    }))
    

    拦截器

    interceptors,在发起请求之前做一些处理,或者在响应回来之后做一些处理。

    请求拦截器

    axios.interceptors.request.use(config => {
      // 在发送请求之前做些什么
      return config;
    })
    

    响应拦截器

    axios.interceptors.response.use(response => {
      // 对响应数据做点什么
      return response;
    })
    

    移除拦截器

    const myInterceptor = axios.interceptors.request.use(config => {});
    axios.interceptors.request.eject(myInterceptor);
    

    为axios实例添加拦截器

    const instance = axios.create();
    instance.interceptors.request.use(config => {});
    

    取消请求

    用于取消正在进行的http请求

    const source = axios.CancelToken;
    const source = CancelToken.source();
    
    axios.get('/getUserInfo', {
      cancelToken: source.token
    }).then(res => {
      console.log(res);
    }).catch(error => {
      if(axios.isCancel(error)) {
        // 取消请求
        console.log(error.message);
      } else {
        // 处理错误
      }
    })
    
    // 取消请求 参数 可选
    source.cancel('取消请求');
    

    错误处理

    在请求错误时进行的处理
    request / response 是error的上下文,标志着请求发送 / 得到响应
    在错误中,如果响应有值,则说明是响应时出现了错误。
    如果响应没值,则说明是请求时出现了错误。
    在错误中,如果请求无值,则说明是请求未发送出去,如取消请求。

    axios.get('/user/12345')
      .catch(function (error) {
        // 错误可能是请求错误,也可能是响应错误
        if (error.response) {
          // 响应错误
        } else if (error.request) {
          // 请求错误
        } else {
          console.log('Error', error.message);
        }
        console.log(error.config);
      });
    

    在实际开发过程中,一般在拦截器中统一添加错误处理
    请求拦截器中的错误,会当请求未成功发出时执行,但是要注意的是:取消请求后,请求拦截器的错误函数也不会执行,因为取消请求不会抛出异常,axios对其进行了单独的处理。
    在更多的情况下,我们会在响应拦截器中处理错误。

    const instance = axios.create({});
    instance.interceptors.request(config => {
    
    }, error => {
      return Promise.reject(error);
    })
    
    instance.interceptors.response(response => {
    
    }, error => {
      return Promise.reject(error);
    })
    

    axios 预检

    当axios的请求为非简单请求时,浏览器会进行预检,及发送OPTIONS请求。请求到服务器,询问是否允许跨域。如果响应中允许预检中请求的跨域行为,则浏览器会进行真正的请求。否则会报405错误。

    展开全文
  • (axios)axios总结

    2020-07-24 19:36:13
    最简单的axios用法 main.js import axios from 'axios' axios({ url:'http://xxxx' }).then(res => { console.log(res); }) axios发送并发请求 使用axios.all()可以放个多个请求的数组 axios.all([])返回的...

    axios用法

    使用接口测试的网站
    http://jsonplaceholder.typicode.com/
    or
    http://dummy.restapiexample.com/

    get:

    axios({
          method:'get',
          url:'http://jsonplaceholder.typicode.com/posts'
        })
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          })
    

    在这里插入图片描述
    在这里插入图片描述

    post: 两种写法

    第一种:

    axios({
          method:'post',
          url:'http://jsonplaceholder.typicode.com/posts',
          // data适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
          data:{
            title:'js',
            completed:false
          }
        })
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          })
    

    第二种:

    axios.post('http://jsonplaceholder.typicode.com/posts',{
            title:'js',
            completed:false
          })
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          })
    

    修改 put or patch

    //针对某一条 路径后跟动态参数 和要修改的数据
        axios.put('http://jsonplaceholder.typicode.com/todos/1',{
          title:'hhhh',
          completed:false
        })
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          })
    

    put和patch的区别?

    • patch只传一个userName到指定资源去,表示该请求是一个局部更新,后端仅更新接收到的字段。
    • put虽然也是更新资源,但要求前端提供的一定是一个完整的资源对象,理论上说。

    delete

    axios.delete('http://jsonplaceholder.typicode.com/todos/1')
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          })
    

    axios发送并发请求

    1. 使用axios.all()可以放个多个请求的数组
    2. axios.all([])返回的结果是一个数组,使用axios.spread()可以将数组展开
    axios.all([axios({
      url:'xxx'
    }),axios({
      url:'yyy',
      params: {
        type:'sell',
        page:5
      }
    })])
      .then(res => {
        console.log(res);
    })
    

    另种格式:

    axios.all([
          axios.get('http://jsonplaceholder.typicode.com/todos'),
          axios.get('http://jsonplaceholder.typicode.com/posts')
        ])
          .then(res => {
            console.log(res[0]);
            console.log(res[1]);
          })
          .catch(err =>{
            console.log(err);
          })
    

    axios.spread()

    axios.all([axios({
      url:'http://xxx'
    }),axios({
      url:'http://yyy',
      params: {
        type:'sell',
        page:5
      }
    })])
      .then(axios.spread((res1,res2) => {
        console.log(res1);
        console.log(res2);
    }))
    
    axios.all([
          axios.get('http://jsonplaceholder.typicode.com/todos'),
          axios.get('http://jsonplaceholder.typicode.com/posts')
        ])
          .then(
            axios.spread((todos,posts) => {
              console.log(todos);
              console.log(posts);
            })
          )
          .catch(err =>{
            console.log(err);
          })
    

    自定义请求头

    //自定义请求头
        const config = {
          headers: {
            'Content-Type':'application/json',
            Authorization:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
          }
        }
    
        axios.post('http://jsonplaceholder.typicode.com/posts',{
          title:'js',
          body:'hhhhh',
         
        },config)
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          })
    

    在这里插入图片描述

    全局配置

    在上面的示例中,我们的BaseURL是固定的。

    • 事实上在开发中可能很多参数都是固定的。
    • 可以进行抽取,也可以利用axios的全局配置。

    全局配置token示例

    全局配置之后,不管发什么请求 请求头里都含有Authorization

    axios.defaults.headers.common['Authorization'] = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
    
        axios.get('http://jsonplaceholder.typicode.com/posts')
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          })
    

    其他:

    axios.defaults.baseURL = '123.200....'
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    

    eg:这样同样能拿到结果

    axios.defaults.baseURL = 'http://xxx'
    axios({
      url:'/home/multidata'
      //更多配置选项
    }).then(res => {
      console.log(res);
    })
    

    常见的配置选项:https://github.com/axios/axios : Request Config

    请求地址url: ‘/user’
    请求类型method: ‘get’
    请求路径baseURL: ‘https://some-domain.com/api/’
    请求前的数据处理transformRequest: [function (data){}]
    请求后的数据处理transformResponse: [function (data){}],
    自定义请求头headers: {‘X-Requested-With’: ‘XMLHttpRequest’}
    URL查询对象params:{}
    延时timeout: 1000
    跨域是否带tokenwithCredentials: false

    注意post请求要把参数放到请求体data里,get不用


    异常处理

    axios.get('http://jsonplaceholder.typicode.com/postss',{
          // validateStatus:function(status) {
          //   return status < 500   //对是否进入下面的if错误处理作限制
          // }
        })
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            if(err.response) {
              console.log(err.response.data);
              console.log(err.response.status);
              console.log(err.response.headers);
    
              if(err.response.status === 404) {
                //做一些错误码为404的操作 这里简单做一个弹框
                alert('Error: Page Not Found!')
              }else if(err.request) {
                //请求成功 但后台无响应 
                console.error(err.request);
              }else {
                console.err(err.message);
              }
            }
          })
    

    在这里插入图片描述


    取消请求

    给一个错误的请求地址

    const CancelToken = axios.CancelToken;
        const source = CancelToken.source();
    
        axios.get('http://jsonplaceholder.typicode.com/postss',{
          cancelToken: source.token
        })
          .then(res => {
            console.log(res);
          })
          .catch(thrown => {
            if(axios.isCancel(thrown)) {
              console.log('Some Message:', thrown.message);
            } 
          })
          if(true) {
            source.cancel('Request canceled')
          }
    

    axios的实例

    • 当我们从axios模块中导入对象时使用的实例是默认的实例
    • 当给该实例设置一些默认配置时,这些配置就被固定下来了
    • 但是后续开发中,某些配置可能会不太一样:比如另一个页面的服务器地址完全不同
    • 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等
    • 这个时候就可以创建新的实例,并且传入属于该实例的配置信息

    为了应对不在同一个ip地址 创建对于的axios的实例

    const instance = axios.create({
          baseURL:'http://jsonplaceholder.typicode.com'
        })
        instance.get('/posts').then(res => console.log(res));
    

    封装网络代码

    request.js

    //导出的形式使用函数 方便调用
    import axios from 'axios'
    export function request(config) {
         //1.创建实例
        const instance1 = axios.create({
        baseURL:'xx'
        })
        //发送真正的网络请求
        return instance1(config)  //本身返回promise 直接return
      
    }
    

    使用

    import {request} from './network/request'
    request({
      url:'/home/multidata'
    }).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
    

    拦截器

    axios提供了拦截器,用于我们在发送每次请求或者得到响应后进行对应的处理。
    四种:请求成功/失败、响应成功/失败

    请求拦截:

    //导出的形式使用函数 方便调用
    import axios from 'axios'
    export function request(config) {
        //1.创建实例
        const instance1 = axios.create({
        baseURL:'xx'
        })
        //2.拦截器 axios.interceptors是全局 这里使用局部
        instance1.interceptors.request.use(a => {
          // console.log(a); //打印的都是配置信息 
          //比如每次发送网络请求 都希望显示请求图标
          //比如加上header 
          //某些网络请求(登录)必须携带一些特殊信息 如token 如果没有就跳转页面让用户先登录
          return a; //必须返回 不然会请求失败
        },err => {
          console.log(err);
        })
    
        //3.发送真正的网络请求
        return instance1(config)  //本身返回promise 直接return
      
    }
    

    响应拦截:

        instance1.interceptors.response.use(res => {
          return res.data
        },err => {
          console.log(err);
        })
    
    展开全文
  • axios封装

    2019-08-19 16:23:18
    // 封装一下axios方法; import axios from 'axios' // `baseURL` 将自动加在 `url` 前面... // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL axios.defaults.baseURL = 'http://172.28.194...

    server/http.js:

    // 封装一下axios方法;
    import axios from 'axios'
    
     // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
      // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    axios.defaults.baseURL = 'http://172.28.194.52:3000/'//这是请求的域名地址
    
    
    // get和post传params的区别,get要{params},否则失败;
     function GET(url, params) {
        return new Promise((scuessful, fail) => {
            axios.get(url, {params})
                .then(function (response) {
                    scuessful(response);
                })
                .catch(function (error) {
                    fail(error);
                });
        });
    }
     function POST(url, params) {
        return new Promise((scuessful, fail) => {
            axios.post(url, params)
                .then(function (response) {
                    scuessful(response);
                })
                .catch(function (error) {
                    fail(error);
                });
        });
    }
    
    // export default 导出的是一个对象集合;
    export default{
        GET,POST
    }
    
    // 引用方法的方式:
    // 这是文件是使用export default{方法1,方法2},以导出对象的方式;使用的时候要:对象.方法1()
    // import HTTP from '~/assets/server/http.js' 使用的时候就,HTTP.GET();
    
    // export 导出的是一个方法;
    // export function funcName(){}
    
    // 这是文件已export function funcName(){}的方式导出方法,引用的时候要{方法1,方法2}的方式。用的时候直接:方法1();
    // import {GET,POST} from '~/assets/server/http.js' 使用的时候,就GET();
    

    server/api.js

    // 这个文件主要用于放置所有接口
    
    // 这是文件是使用export default{方法1,方法2},以导出对象的方式;使用的时候要:对象.方法1()
    import HTTP from '~/assets/server/http.js'
    
    // 这是文件已export function funcName(){}的方式导出方法,引用的时候要{方法1,方法2}的方式。用的时候直接:方法1();
    // import {GET,POST} from '~/assets/server/http.js'
    
    // ##############################################################################################
    
    // 本js方法的例子:
    // function funcName(参数){
    //    return HTTP.GET('接口地址',参数)
    // }
    
    // ##############################################################################################
    // ————次数————
    function getVisitors(){
       return HTTP.GET('/article/articleList')//访问次数
    }
    
    // ————文章————
    function getAticleList(){
       return HTTP.GET('/article/articleList')//获得文章列表
    }
    
    function postAticle(){
       return HTTP.POST('/article/articleList')//获得文章内容
    }
    
    function getAticleRead(){
       return HTTP.get('/article/articleList')//获得文章阅读次数
    }
    
    // ————评论————
    function getMessageList(){
       return HTTP.GET('/article/articleList')//获得评论列表
    }
    
    function postMessage(){
       return HTTP.POST('/article/articleList')//提交评论
    }
    
    
    export default{
        // funcName
    
        // 访问次数
        getVisitors,
    
        // 博客接口
        getAticleList,
        postAticle,
        getAticleRead,
    
        // 留言接口
        getMessageList,
        postMessage,
    }
    
    // ##############################################################################################
    // 在其他页面引用本js的方式是:
    // import SERVER from '~/assets/server/api.js'
    // SERVER.funcName(参数).then((data) => {
    //     成功调用的方法
    //   }).catch(() =>
    //     失败调用的方法
    //   )
    // }
    // ##############################################################################################
    
    展开全文
  • 在Vue项目根据图片url获取file对象并用axios上传图片url转file对象axios上传 图片url转file对象 <script> export default { data() { return { ruleForm: { coverUrl: "", coverFile: "" }, }; }, ....
  • axios用法

    2021-03-04 16:10:15
    官网文档 https://github.com/axios/ 中文站点:http://www.axios-js.com/ ...axios.get(guolv_url,{ params: { username: "tom", dbname: "db_xx" } }).then((res) => { console.log(res); }.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,194
精华内容 3,677
关键字:

axios获得url